Angular 4 Tutorial – Photo Gallery App



In this video, I build a simple image gallery application using Angular 4. We’ll use the Angular CLI to scaffold the project and then create custom Components, an image Service, and a custom Pipe to build a filterable photo gallery.

Check out my premium Angular + .NET Core Web API Premium Course at ProductiveDev:

https://productivedev.com/product/ng-dashboard-net-core-api/

Get 15% off a Pro Membership subscription by using promo code ‘DEV2017’ at checkout.

Link to code on GitHub: https://github.com/wesdoyle/ng-gallery

Note that I’m using bash commands on the command line – for this, you’ll need a terminal emulator like Bash on Ubuntu on Windows, Git for Windows, or Cmder. I’m using Cmder, which you can find here: http://cmder.net/

Post a link to your code if you make improvements – I may mention your repository in a future video!

Some ideas for improvement:

– Filter using image service instead of custom Pipe
– Incorporate infinite scroll style lazy loading
– Implement masonry-style tiling / better CSS

Dependencies:
– Typescript – https://typescriptlang.org
– Node.js – https://nodejs.org/en/

34 thoughts on “Angular 4 Tutorial – Photo Gallery App”

  1. Note – this video is for building a simple gallery app using Angular, not AngularJS! See the description for more details. 🙂

    Reply
  2. Sir, I also have made an image gallery app with a search feature with some changes with the help of your videos. Hope you like it.Thank you so much

    Github: https://github.com/harshilparmar/Search-filter-image-ng6

    Heroku : https://search-filter-image-angular.herokuapp.com/gallery
    Sir, how it is ..please give some feedback

    Reply
  3. Hi Wes, I took on your challenge of making improvements to this project…or at least I tried. My app loads images from picsum and I use a different category for filtering.
    As per the suggested improvements, I did not filter using a service as I really liked the way you filter with a pipe; had never used a pipe for filtering before, I was mainly doing it through a service. I tried to implement virtual scrolling (not infinite) through Angular Material scroll component which does the work but with a flaw, as it loads more items than I ask for. I posted a question on stackoverflow about this, no luck yet. And I did not bother about the masonry-styling yet, i don't really like playing with css… 🙂
    You can find the app here -> https://github.com/papakonstantinouko/gallery-app

    Reply
  4. Even though I followed the Tutorial with the current version of Angular (7), its still awesome. I have gone through almost all the comments but I have seen no one has gotten my peculiar problem. It seems I am the only one getting this error: My images could not show up on the browser and the reasons as I later found out was because they are served from my local disk. This is what I get all time as my error and it really forces me to a halt: GET http://localhosr:4200/src/assets/images/boat1.jpg 404 (Not Found). I will appreciate it very much if someone can help me resolve this issue. After all THANK YOU Wes for the great job.

    Reply
  5. Thank you very very much for this tutorial. I haven't found anything this clear. I'm very new to programming also to Angular so I'm sorry for this stupid question but how to show images with API keys? I have an assignment to make image gallery using Marvel API Keys. I really hope you would reply here or email me at intankirana19@gmail.com thank you very much.

    Reply
  6. if I use this.route.snapshot.params['id'] it says Property route does not exist on type 'imageDetailComponent'. How to solve this?

    Reply
  7. For everyone who have Bootstrap problem, resolve for me was renaming style.css -> style.scss, then importing Alert from ng2-bootstrap, and in imports array adding Alert.forRoot() (all in app.module.ts) thumbs up so everyone who have this problem see this! BTW Wes, nice tutorial! Thank You!

    Reply
  8. how do we add slice(0) like IMAGES.slice(0) if we get response from by this.http.get('some-url.com') help please

    Reply
  9. Hello. Great vid. I was wondering if you could help me. I am getting an error in image-detail.component.ts TS2390: Constructor implementation is missing and another error stating TS2369 that A parameter property is only allowed in a constructor implementation. Any help you could give would be greatly appreciated. Thanks mate.

    Reply
  10. For installing bootstrap module , they changed npm install ng2-bootstrap bootstrap –save to npm install ngx-bootstrap bootstrap –save

    Reply
  11. Hi wes!! .. I have created till navbar , but the navbar component is not showing on the page , it's only showing "Loading.. Can you please help me with the code? I really want to complete this tutorial :

    navbar.component.ts

    import { Component } from '@angular/core';

    @Component({
    selector :'app-navbar',
    templateUrl: './navbar.component.html',
    styleUrls:['./navbar.component.css']
    })

    export class NavbarComponent{
    title = 'Gallery';
    }

    app.component.html
    < div class = "container">
    <app-navbar></app-navbar>
    </div>

    navbar.component.html
    <h2>{{title}}</h2>

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';

    import {AlertModule} from 'ngx-bootstrap';
    import { AppComponent } from './app.component';
    import { NavbarComponent } from './navbar/navbar.component';

    app.module.ts

    @NgModule({
    declarations: [
    AppComponent,
    NavbarComponent
    ],
    imports: [
    BrowserModule,
    AlertModule.forRoot()
    ],
    providers: [],
    bootstrap: [AppComponent]
    })
    export class AppModule { }

    Reply
  12. Ok, I liked it overall, but for god sakes, get a damn IDE. Half this video was spent watching you fix stupid mistakes that a halfway decent IDE (Atom does NOT count) would've prevented from happening in the first place. There were times I was sitting there looking at code I had written from your video that I KNEW was wrong because my IDE told me it was, and waiting until you caught it and showed me how to fix it.

    Reply
  13. try to install this => npm install ngx-bootstrap –save
    because the ng2-bootsrap is no more exit.
    visit below for more info:
    https://www.npmjs.com/package/ng2-bootstrap

    Reply
  14. Thanks for making something complicated sounds doable! You gained yourself a subscriber on me as well ! Keep the angular stuff coming!

    Reply
  15. Your voice is completely understandable and not boring (cool) and your tutorial is the best of the best! I learned many things… Subscribed!

    Reply

Leave a Comment