Learn Angular A-Z: Complete Tutorial for Beginners

[@sauravsingh471]

Thanks, I completed the whole video, and I was coding along side you, To anyone who is thinking of watching this , you should definitely watch it, although a few things have changed but the remaining 85% of the things is still the same

[@bhawnasingh9566]

can you please tell how did you install angular

[@irfandy8]

@@bhawnasingh9566 Have you tried reading their docs? I know I can give you the straight answer. But I really want to encourage you doing it the right way, and that is reading through their docs.

[@abdelrahmanmahmoud4995]

One of the best Angular tutorials, I really like how you simplify everything

[@patriciebakosova4878]

Thank you Jeremy, for this absolutely fantastic video. I just started work in Angular as a junior dev and it feels very overwhelming as I only learned React. I'm just half way through your video and it's helping me so much already! I watched few other tutorials, but this is by far the simplest explanation what you can get while building. And it's actually the newest what you can get as well. Plus it's in native english and your voice is a pleasure to listen to! Thanks again, great work.

[@riclaq4437]

Monster of a tutorial I think it's gonna help me a lot for my internship :)

[@SamoThreeSixty]

Give this man 100,000,000,000!!!

[@akashaabeysundara8454]

this is by far the best youtube tutorial for angular

[@envatotuts]

Thank you for watching! Cheers! 💚

[@sweetiei.8403]

Just strated to watch it, one of the reasons is the perfect voice to listen for 4 hours!

[@envatotuts]

Hi! Thanks so much for the awesome feedback! We're glad you're enjoying the tutorial and the voiceover. Hope you have a great time watching! Cheers!

[@CristinadeKlerk]

In order to run this project in angular 17+, just initialize your project without standalone using ng new wishlist --no-standalone instead of ng new wishlist

[@larryking1153]

Great tutorial....One of the best Angular tutorials I've seen

[@Mark-nm9sm]

Job requires angular but the more i watch this the more i love react 🤣

[@MrChrizzilla]

Hard agree. Bi-directional binding of properties between parent and child is going to be a nightmare to debug 😱 Having to deal with html "template" files rather than JSX/TSX is just gross. I also don't like being forced into writing components in an OOP way with classes. React moving to functional components and hooks was the best thing that could have happened to it. I imagine this new job is going to be HOC hell, like React originally was.

[@victortarus2814]

same boat

[@hassanmostafa4070]

Agree 👍👍👍💯

[@irfandy8]

I must say, even though Angular 18 came out, this has been one of the fundamental lesson that I had in mind! I always loved NestJS module system, but I never knew that we had that in frontend and that's in Angular! That's amazing!

[@anzaniradali1706]

The best thing about this tutorial is that your voice is perfect for listening for hours 😭

[@legend225dev]

Excellent course about AngularJs. I have worked with reactjs, but for separation of concern and build-in feature provide by angularJs. I have decided to choose angularJs to build a web application for a customer.

[@JeremyEllington]

Amazing work. Thank you for giving this to the community.

[@bemaxng4676]

Wouldn't it be nice if we all liked this great Tutorial 😊

[@ajskjub5171]

I love the way you teach us, not just to create the "perfect" solution but actually to progressively strive to that state, so we can see the way you are thinking of something. Also it is structured very well. Don't know what to say except this is a perfect tutorial, thanks a lot :) PS can you maybe name to me what other tutorials do you have because as I can see this is something like group channel, so which specific tutorials are made by you?

[@envatotuts]

Hi! Thank you so much for your wonderful feedback! We're glad to hear that you're enjoying the way Jeremy McPeak teaches. His approach really helps to illuminate the creative process. While he doesn't have a personal channel, you can find all his available videos by searching for his name on KZbin, which will also include content from our channel. As for tutorials, our channel covers a variety of topics in graphic design and other creative skills, so you can explore different areas to enhance your learning. We appreciate your support and hope you continue to find value in our content! Cheers!

[@zNeoDev]

Can't believe that I learned Angular in just a week thanks to this video.

[@ricardomartinhodacruz]

I just got a job proposition which they use angular, and even tho I had 2 weeks not even of angular around 2022 I'm mainly a React Htmx dev. I'm going to eat this tutorial and tell you the afterwards conclusion in awhile.

[@Mark-nm9sm]

Amazing tutorial, after finishing it , angular doesnt look that annoying anymore

[@DH-jw4iy]

Thank you sir for this great tutorial. Do you have or do you plan to create the next level Angular course?

[@DownShut]

I agree. The next level of Angular course will be awesome.

[@MediNaPowaznie]

Thank you for this course! Just watched it all and coded along and I feel that I'm ready to jump into some Angular projects.

[@soukainaj]

Thanks for the tutorial! Your way of teaching is amazing.

[@kxhakol]

hats off, you have a gift for explaining things

[@gajananfetare4901]

Very professional it helps me a lot

[@ryanford516]

Great tutorial. Angular 19 has changed some of the ways a typical app is structured but overall this material is still relevant today. One thing I'd like to notice that maybe it's just me but every once in a while the application has to be restarted via ng serve to actually get rid of the compiler's error messages and warnings

[@envatotuts]

Hi! Thanks for the feedback! Angular updates can definitely cause some changes, but it’s great to hear the material is still helpful. Restarting the app via ng serve can often clear up those issues. Cheers!

[@smrsgv]

Thanks for a really great work! Can you share the settings and extensions you use for VS Code?

[@princechangani5302]

same question ... if you know then pls reply

[@petermeredith8698]

I just worked through the entire video and didn't have a single issue where my code didn't work outside of my mistakes. Just make sure you're using angular 16 and not whatever is latest (17 right now).

[@humanity7880]

Thanks mate

[@melindahows6300]

Thank you, excellent tutorial, clear and well paced. Enjoyed figuring out how to do things that have changed since first released.

[@envatotuts]

You're very welcome!

[@vladimir_dev]

Great tutorial... What are the chances of getting one (or an update to this one) for Angular 17 and Signals when it comes out? :)

[@nouchance]

THANKS Envato TUTS!

[@JenniferThomas-wz2qu]

Thanks for this very detailed tutorial

[@slin3232]

Angular 17 changed a few things (no modules by default), so this tutorial needs some minor updates I guess.

[@user-ee1hg]

"ng new appname --no-standalone" use this command for setting up the environment. now you'll have the setup environment with module.ts file

[@tonykalajo6634]

The best tutorial online.. plz let us know if you have a channel, dont mind even paying for any subscription.

[@mrtn5882]

Is there a full-blown course by Jeremy that goes beyond these initial four hours? I'd happily pay to get access to that, in case it exists.

[@mypreciouz5634]

At 3:00:43 when i export the WishService module like you do in the video my app crashes and ı get 'WishService does not appear to be an ngModule error. However if I don't export it everything works fine. Why is that the case? I am confused.

[@blue-jk2qu]

In WishModule, WishService needs to be listed in the 'providers' array: @NgModule({ declarations: [ WishListComponent, AddWishFormComponent, WishFilterComponent, WishListItemComponent ], imports: [ CommonModule, FormsModule, HttpClientModule, ], exports: [ WishListComponent, AddWishFormComponent, WishFilterComponent, WishListItemComponent, ], providers: [ WishService ] }) export class WishModule { }

[@ShaggyRobot]

You sound really nice, reminded me a bit of narrator from Stanley Parable :)

[@independentthinker4881]

Great tutorial but badly needs to be updated to the a latest versions of node and angular as they have some pretty big changes that break this tutorial.

[@doublebeefstew]

3:56:58 route table router link

[@chickachickachicka]

..it might be helpful to mention SOMEWHERE the angular version you're using - so that I could setup the right project number - cause as of this writing - 10 minutes into the video and Angular 17 doesnt have the app.module file. so now im stuck. Also the CLI asked me about server side rendering and I didnt know whether to choose yes or no.

[@ciaochrystusa4778]

This is 16.2, reinstall Angular for this tutorial

[@Empyrean629]

Type the command for installing angular the add @16.0.0 at end then you will good to go.

[@Aeris-Xu]

So the version 17 has really changed a lot, hasn’t it?

[@h.t.8812]

I had the same issues, also I had to remake the folder of the project to be able to add a module file 1 hour into the tutorial and now there's new problems

[@pyjamaprince]

​@Aeris-Xu it has and I cant find ant tutorials for it. This is frustrating.

[@jackiechen9098]

This is the best Angular tutorial! Thank you so much

[@atherghuftar1578]

thank you, you made it very easy.

[@AbhishekMakwana-p1v]

absolute best bro

[@firsthomebuyer]

Thank you Envato!

[@trungkienle1431]

worth every second!!!!!

[@NoumanKhan-ck7vx]

let's go first time learning angular

[@migueloviedo3625]

You truly deserve the $100,000,000. Thank you.

[@migueloviedo3625]

Sorry, I meant - $100, 000, 000,000.

[@Razes9ooo474lO4]

Subscribed from india...

[@ThatPawikBoy]

Thank you for an amazing material ♥️ PS: This feeling when JetBrains pops up the whole code on the first character.

[@envatotuts]

Hi! We're glad you enjoyed the material! 😊 And yes, JetBrains can be a lifesaver with its autocomplete-definitely a game-changer! Cheers! ✨

[@VirajeeAmarasinghe]

Thank you for this valuable tutorial!!!

[@sapumalpriyashantha-s8i]

thank u, really great work, best tutorial

[@kekiir]

28:12 how did you do that paste with all of the stuffs?

[@DevGeniusHub1]

Nice, good explanation! 👍

[@DownShut]

Thank you for this great tutorial. I have question, why you use "let" to define all the variables? I think use const will be better in some cases.

[@AbhishekMakwana-p1v]

bro needs oscar

[@kekiir]

28:09 how did you paste that markup???

[@legionsman7476]

What version of angular is being used in this tutorial?

[@nabeelaliibol2064]

16

[@InduPriyaSiraparapu]

Hello, Can you please explain how to got bootstrap link in index.html at 23:55 in the vedio.

[@h.t.8812]

I love the animation in the beginning how do y'all did this?!? straight up dragging stuff and setting their time and position? animator where r u

[@Lyra35319]

thank you so much,good video

[@h.t.8812]

I'm at 6:55 it asked me if I want to enable server-side rendering and static site generation, should I have said yes? I said no

[@SpikedSpy_]

thanks for this tutorial!! I have one question however. for some reason i didn't have some of the base files you had. Did follow your tutorial step by step though. is this because of different angular versions?

[@envatotuts]

Hi! It’s possible that differences in Angular versions might affect the files and structure you see. Ensure that you’re using the same version of Angular (Angular 15) as in the tutorial. You might also want to check the tutorial’s description or linked resources for any additional files or updates. Hope this helps, cheers!

[@SpikedSpy_]

@@envatotuts thanks! I was indeed using a different version. I found a roundabout in Importing CommonModule and FormsModule in the app.components.ts file itself for now. not sure how it will affect the project overall but for now it seems to work fine.

[@remoonalmaghout9621]

Thanks for a really great work!

[@BR50Kab]

some issues with not finding the module due to not having a baseUrl set, after setting this to ./src and removing src from the import location this worked. Probably also coul have used .src/etc in the import

[@mveronie]

Thanks! This saved me a lot of headache!

[@codeavecwinner]

First comment. Worth a trophy

[@inakaboyz]

whats the version of angular youre using?

[@apoorvalandge2687]

Does the tutorial cover State management ngrx?

[@kmonish9119]

For someone, who is starting this when the @angular/cli is 17 or more, downgrade the @angular/cli version to 16. You can do this by the following command: npm i @angular/cli@16.1.0 @Envato Tuts+ - could you help what could be the issue with version 17. The components.module.ts is not available when we create a new angular project. Thanks :)

[@kingchrisbreezy]

i'm having some trouble to generate app.module.ts file, what supose to be? help please

[@eljana123]

Thank youuuu 😊😊

[@kekiir]

Some one pls tell me, how he is doing this: 28:12?

[@Snegge202]

is there a reason to not use ng generate component to add your components?

[@darkoplax7688]

this video made me realize , how bad angular is ... ain't no way you have to write all that boilerplate and overcomplicate everything ; react and frameworks associated with it do everything done here so much easier and you gain insane amount of time ty for the tutorial , i wanted to understand how angular works and i got a good idea but no way i'm using this on my small projects ; think using angular is only worth it if ur being paid to work on a huge project

[@SaiDanushTV]

Before I start with this video is there any pre-requisite that I need to complete?

[@nareshkumar894]

What is the Angular version used in this tutorial???

[@azym_equinox]

Excellent course but its a shame it only covers the very basics and barley any RxJs and no NgRx, State Change, Change Detection etc. Anyone has any advice on where should I learn these concepts fast?

[@envatotuts]

Hi! Thanks for the feedback 😊 The official Angular docs and RxJS website offer great resources for learning fast. Cheers!

[@SRIVENKATESHR-qn1lp]

25:40 In the latest version of Angular v17, built-in for loop is updated. Below is the syntax , @for (item of items; track $index) { {{item.wishText}} 
 }

[@afrenchdude5331]

thanks

[@matthewkk5087]

I like your theme can you tell me which one of is it ?

[@unknownworld9815]

is there practice project with this video tutorial ?

[@DrTatra]

thank you so much

[@rayenmerghmi5664]

01:53:43

[@joelboardgamerpger5393]

how do you get the CDN line for bootstrap to appear in your code? which vs extension?

[@envatotuts]

To get the CDN line for Bootstrap to appear in your code automatically, you don’t necessarily need a specific Visual Studio (VS) extension. However, you can use the "Emmet" feature in VS Code, which is built-in, to quickly add the Bootstrap CDN. Just type link:css and press Tab, then replace the URL with the Bootstrap CDN link. If you want a more automated way, you can install the "Bootstrap 4 & Font awesome snippets" extension, which includes shortcuts for adding Bootstrap links. Hope this helps, cheers!

[@smrushaan2654]

Hi, I understood almost all of course till now but I did not understand the purpose of Lecture 3.3 Setting Up Two Way Binding, can anyone explain to me? I understood how to set up custom two way binding but did it understand why it was done there at all as it made things more complicated and confusing. this.filter = filters[val]; this.filterChange.emit(this.filter); Also what is the point of line 2 (emitting) after this.filter has already been correctly set?

[@envatotuts]

Hi! Great question. The purpose of this.filterChange.emit(this.filter) is to notify the parent component about the updated filter value, which is essential in custom two-way data binding. The parent component needs to know about this change to update its state and reflect the changes properly in the UI. Hope this helps! Cheers!

[@smrushaan2654]

@@envatotuts Tysm!! I actually understood this after 1 hour of wondering, looking at the code and asking to ChatGPT. Btw so far its a great tutorial!

[@sherkhan_5050]

Which Angular version is this course about?

[@envatotuts]

Hi! This course is based on Angular 15, which was the latest stable version as of August 2023.

[@sherkhan_5050]

@@envatotuts Thank you for responding.

[@swaroopkanakam8684]

Are there any major changes from 13 to 16 ? my companys code base is in 13 so can i adapt to that if i learn this

[@envatotuts]

Hi! While the core tools in After Effects have stayed similar from versions 13 to 16, newer features and performance enhancements were added in later releases. Learning with this course should still set you up well, but check the differences in specific tools you need to see if there’s any adaptation required. Enjoy exploring AE! Cheers!

[@sudheervelavoor]

Is this video telling about dynamic form ?

[@envatotuts]

Hi! This video introduces dynamic form concepts under the "Working With Reactive Forms" section, specifically creating control groups and writing custom validators. Check out that part for more details!

[@sudheervelavoor]

@@envatotuts Thatnks for the reply

[@ismailbakhach8990]

how can i make my classes implements OnInit by default when i generate a components ?

[@kevin-howard]

What's the vscode theme?

[@carlogbossou9253]

Hello sir, thank you very much for this tutorial. I have question. For implementation of ouput directive, why you used parentheses for (addWish) and (filter) but you used brackets for [wishes] ??? Excuses my english, I'm french speaker. Thank you.

[@norepeato]

One type of parentheses is for output and the other one for input

[@MicheleMoodispaugh]

cool video)

[@stermangor]

What color theme is this? anyone knows maybe ? i mean the same effect in *ngIf =" ......."

[@JustineEspinosa-p9n]

I encountered NG0100: ExpressionChangedAfterItHasBeenChecked in 4.1 Using Observables. How to fix this?

[@denindenial]

Awesome tutorial! Thank you

[@ismailbakhach8990]

what version is this 16 ?

[@omarwasfi]

thanks

[@VMDevTutorial]

I dont see app.module.ts file being created when I did the setup. Any idea how to fix it?

[@ryanford516]

You'll have to create a new app if you absolutely have to have a project structure similar to the one handled in this course. Just use an additional flag when generating the app. So instead of just typing in ng new wishlist enter the following: ng new wishlist --standalone false

[@envatotuts]

Hi! If the app.module.ts file isn’t created, it could be due to an incomplete Angular setup. Make sure you’ve run ng new project-name correctly, and that the Angular CLI is installed globally. If the issue persists, reinstall the CLI and try again. Cheers!

[@ryanford516]

@@envatotuts I believe Angular 17+ simply doesn't generate this file by default unless you set a special option when creating your app via CLI

[@mccloudsw]

I don't think using event bus for removing item is a good idea. In xaml it is usually done by having item template inside list component and it was possible to bind to parent command. Service injection is too much too, binding event is better I suppose.

[@envatotuts]

Hi! Thanks for sharing your thoughts! You bring up a great point about using item templates and binding commands. It’s always good to explore different approaches for handling events. Cheers!

[@shortscut7614]

28:35

[@riclaq4437]

3:07:12 the what now

[@adimardev1550]

is this Angular 16?

[@dev-j8q]

best