Angular4-PhotoGallery Application

A simple gallery application developed using Angular4 and a custom Pipe is used to build a filterable photo gallery.
We will have different set of categories and depending on the selection photo gallery will be filtered.
If we click on the image, we can view enlarged image with its caption.
Each image will have a metadata associated with it.

Metadata of an image will include

Caption

Category value

This metadata can be used to dynamically generate the filters.

---

Application is deployed on Heroku: https://photogalleryapp1.herokuapp.com/gallery

---

Pre-requisites

Node.js

TypeScript

Angular CLI

---

Screenshots

All images in the photo gallery

Filtering images by category

When clicked on an image, its details are displayed

---

Generate angular application using Angular CL

$ng new PhotoGalleryApp

Bootstrap Installation Step

Step 1:

$npm install ngx-bootstrap bootstrap --save

Step 2:
In app.module.ts,

import {AlertModule} from 'ngx-bootstrap/ng2-bootstrap';

and import AlertModule in imports[ ] of NgModule decorator
Include the following relative path under "styles" attribute in .angular-cli.json

"styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
      ]

---

While using AlertModule component form bootstrap, I encountered this issue =>
No provider for alertconfig! - with angular-cli
Solution: Import AlertModule with with forRoot() in imports[ ] of NgModule() decorator in app.module.ts

@NgModule({ 
        ------
        ------
        
        imports: [
        ------
        ------
        AlertModule.forRoot()
        ],
        -------
        -------
})

Reference link: valor-software/ngx-bootstrap#1365

---

Create a navbar component inside app folder

Google fonts are used in navbar component. Search for Lato and Open-sans
Embed the following line of code in index.html under tag

<link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans" rel="stylesheet">

---

Create an image component that will be displayed inside the gallery

Use service Service will be dealing with fetching the image from backend service. Serve static images Service will be injected in ImageDetailComponent's constructor

Add ImageService to the list of providers in app.module.ts
Use pipes to filter images

Image detail component will allow us to see an instance of an image. For this, routes are implemented. This will allow to change view in the application. Register the routes in app.module.ts

import { appRoutes } from '../routes';

@NgModule({
        -------
        -------
        ------
        imports: [ 
        ------
        -----
        RouterModule.forRoot(appRoutes)
        -----
]

Include following in app.component.html

<router-outlet></router-outlet> 

router-outlet => Acts as a placeholder that Angular dynamically fills based on the current router state

---

I encountered the error such not a module in the console when I tried adding the components manually.
Solution: Try restartring the editor. Complie and run the code again. This happens when you add a new class outside from your editor or keep running your angular cli 'ng serve'. Actually your editor or 'ng serve' not able to find the newly created files.
Reference link: https://stackoverflow.com/questions/34629517/file-app-hero-ts-is-not-a-module-error-in-the-console-where-to-store-interfac