Angular 4 Tutorial - Image Search App with Http

Pro Members at Productive Dev get access to all of my current and future premium courses.

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

* Note that the material design library (and likely other libraries) have had breaking changes since this video was uploaded. As of October 2017, you should be able to change the 'md' prefixes to 'mat' for material design components. In future videos, I'll try to remember to use explicit versions of third party libraries so the tutorials aren't outdated so quickly.

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

Some ideas for improvement:

- Create separate search, image, and gallery components
- Adjust search to filter results based on other criteria

Dependencies and Libraries:

[DanVega]

Great tutorial Wes! Just a couple of notes...

There is no need to create the directory when creating a new project using ng new, the command will do that for you
There is also no need to create a new directory when creating a new component, ng will also do that for you.

[justincastillovalladares]

You are awesome with Angular 4+
Just a suggestion, remember to mention the manual import of FormsModule and HttpModule, which no longer come by default in the latest versions of framewrok

[NitinKatiyarCircle]

Really like the speed of video, worth spending 49 mins. Also Like that you are typing majority of code which help in understanding.

[davidharestad]

Very much appreciated!

I had some issues with the deprecated material, but the comments here helped :)

Again, thanks a bunch from a wannabe developer

[ruhaise]

you are a legend, it's so simply explained, great job, expect more projects like this with angular 5+, thanks very much bro

[spotbox]

Sir, your video were too awesome. Easy to follow and happy to learn with you..

[popartdesign]

As usual, awesome tutorial! I'm devouring your videos and learning a lot!!! Thanks!

[MichaelMartire]

If you use flexbox's justify-content/align-items = "center" on your container, you won't get those uneven margins on the right side of your page. It will always stay perfectly centered even after resizing. Great tutorial btw!!!

[ramaraob]

Thanks Wes, great work...
Can you make more videos on Material Design and Masonry with angular4... very interesting

[dexternierva]

Amazing tutorial Wes! Really enjoyed and learned a lot, thanks very much!

[leandritferizi]

I am loving your Angular tutorials. Great content. Will you be doing any tutorial for Angular with Laravel or Rails?

[alex-karpov-dev]

Really Great and Inspiring chanell! God Bless U and Ur work :)
Keep going!!!!

[DanielWeikert]

Thanks a lot. I am starting with Angular 4 and real Projects are really helpful. Your explainations are very good, so i need to ask whether you can (beside future Apps of course ;) ) could do one video where you cover things like specific decorators, Viewchild and thinks like that? Thanks and best

[ronysmile]

Sir, You are Awesome.! Loved your tutorial

[michaelm]

How would you add an event listener for the enter key on the input?

[brianfabrizio]

Great tutorial, but needed to mention that HttpModule should be in app.modules.ts. Took me some time to track this down, but that is how you learn I guess. :) Thanks for putting this together.

[troybryantIII]

Great vid only problem was the Masonry Module that seem to blow up. Otherwise got a few great take aways from this

[yabba]

I had to import the FormsModule for the [(ngModel)] on the <input> to work
add this to your app.module.ts :
and in imports: [ FormsModule ]

[djalinthemix]

Great video. Can you do a video, that while doing an application, focuses on the things that are done while building a real world application such as using github, unit testing, e2e testing, etc.

[ronon]

Thx Wes, rly useful. Looking for more :)