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:

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

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:

[WesDoyle]

Note - this video is for building a simple gallery app using Angular, not AngularJS! See the description for more details. :)

[riccardobeltrami]

I appreciate that you have not removed the errors from the video, learning STARTS from the errors. So, thumb up!

[MrTurbo]

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!

[Jyo_tsna_Singh]

Tips: How to NOT get stuck at the bootstrap installation step
1.) Use 'npm install ngx-bootstrap bootstrap --save'
2.) In app.module - import {AlertModule} from
3.) style file path is same as shown in the video (.angular-cli.json)
4.) You need to stop the server and restart it 'ng serve' for bootstrap styles to work

@WesDoyle Thanks for the Tutorial

[ivanavalos]

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

[miguelvillavicencio]

Center Image in second page.

.img-container {
margin: 24px auto;
box-shadow: #555 1px 2px 8px 1px;
min-height: 660px;
width: 900px;
background-position: center;
background-repeat: no-repeat;
align-content: center;
}





Fantastic video

[tanviralamshuvo]

This is the best of Angular 4 tutorial for 2017.. I've become your fan and would love to see some future tutorial with real life example + backend api integration. If possible a node + mongodb + angular 4 stuff would be helpful to thousands of programmers :)

[MrDLashley]

Awesome tutorial Wes, keep up the great work - subscribed!

[FredrickMakoffu]

This was a wonderful practical introduction to Angular4. Appreciate the content.

[coreo]

Great stuff man, you got yourself a subscriber! More Angular and possibly Node stuff please!

[noone]

Not using angular-cli too much. Best practice! Thanks you are awesome.

[yovomanolov]

Great tutorial I am planing to incorporate aws rekognition in it for my masters thesis :)

[ExtremeGamer]

For the people doing this now ng2-bootstrap has been changed to ngx-bootstrap so the install command is npm i ngx-bootstrap -S

[qbacreative]

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

[icingburns]

Hey Wes! the best angular tutorial i have found so far! Thank You!

[samykaruppa]

Thanks, it's really useful to make understand the Anguar stuff.

[mohnadafiz]

quick tip. instead of hard coding all the components files, angular has provided a very useful command line to generate components for generate component gallery --spec false or as short as ng g c gallery --spec false
and it will import the files automatically to your app.module.ts.


Cheers,

[mayurmudliar]

Wes this an AWESOME tutorial you ROCK!!!

[inframatic]

I like when you say "And now we're going back to (such and such page)" before switching to a different file because it gives me time to pause and finish the file i'm working on before you switch to the new file.

[maksymtretiakov]

I'm very glad that I found your lessons. You got a new subscriber :)