Angular4-ImageExplorer

A simple image search application to query the Pixabay API is developed using Angular 4 and Google's material design.
This is an image search application that queries Pixabay API for image data. Depending on the query entered by user, application will fetch the related images with the help of Pixabay API. When user clicks on an image, he will be redirected to pixbay website where we can download, like or share an image.

---

The application is deployed on Heroku. https://image-explorer.herokuapp.com/

---

Pixabay API Documentation
To get the API key, sign up on pixabay website

---

Screenshots

When user enters some query, he gets the related images

Console Output

JSON objects

Masonry Effect

---

Generate the project using Angular CLI
Store the API key in enviornment.ts Create a component to display the images that are returned by API

ng generate component [nameOfTheComponent]

Installing dependencies for angular material

npm install --save @angular/material @angular/cdk

npm install --save @angular/animations

npm install bootstrap --save

npm install --save angular2-masonry

masonry gives responsive feel to set of images when displayed in a group

Add relative paths in angular-cli.json under "scripts"
Include javascript package imagesloaded in index.html https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.3/imagesloaded.pkgd.min.js under script tag.

"../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/@angular/material/prebuilt-themes/indigo-pink.css"

Include fonts link in index.html under head tag Google font: Fredoka One

---

Issues

I faced the following issues while working on this project.

Issue 1: No provider for Http Solution:
You have to register the HttpModule to your module (/app.module.ts):

import { HttpModule} from '@angular/http';

@NgModule({
  imports: [
    HttpModule
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule {
}

Reference link: https://stackoverflow.com/questions/43609853/angular-4-and-ionic-3-no-provider-for-http

I had to import the FormsModule for the [(ngModel)] on the input tag to work
You have to register the FormsModule to your module (app.module.ts):

import { FormsModule} from '@angular/forms';

@NgModule({
  imports: [
    FormsModule
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule {
}