Angular Full Course - Complete Zero to Hero Angular full Tutorial 

React Full Course - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-T0vegRuvV-4.html Source Code - bit.ly/47luSkP Angular Real-World Client Project from Scratch 120+ Hours - Pre-Sale Promo Link - bit.ly/3SbFoGK (Limited Time) Part II Angular Full Course - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-6zv1PTuqIIc.html (Learn to build a Full Angular App) Angular Application From Scratch - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-NWZniJF9zX4.html Figma Web Design Course - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-aCARwi7e130.html Course Content 00:00:00 Course Introduction 00:01:42 Angular & Angular CLI 00:02:12 What is Angular? 00:07:21 What is Single Page Application? 00:09:27 What is Angular CLI? 00:10:34 Angular CLI Setup 00:12:30 First Angular App 00:15:21 Angular File Structure Part I 00:20:07 Angular File Structure Part II 00:21:46 Angular File Structure Part III 00:24:57 End Section Angular & Angular CLI 00:25:33 Intro Angular Components 00:26:06 What is Angular Component 00:31:27 Create an Angular Component 00:40:51 How Loads Components Inside the Browser 00:44:24 Templates & Styles Component Properties 00:49:42 Better Approach for Templates & Styles 00:55:17 Generate Angular Components using Angular CLI 01:00:06 NgOnInit() Lifecycle Hook 01:02:11 Data Binding 01:05:43 Sharing Data Between Components 01:07:55 Parent Child Relationship 01:11:04 @Input Decorator 01:15:27 Task 01:16:51 Solution 01:21:17 @ViewChild Decorator 01:29:11 @Output & Event Emmiter 01:37:47 End Section Component 01:38:43 Section Intro Display Data & Event Handling 01:39:06 String Interpolation 01:43:53 Property Binding 01:47:30 Class Binding 01:50:17 Style Binding 01:55:49 Event Binding 02:00:46 Event Filtering 02:07:15 Template Variable 02:10:25 Two-Way Data Binding 02:14:54 One-Way Vs Two-Way Data Binding 02:21:19 Task 02:23:37 Solution I 02:29:10 Solution II 02:37:01 End Section Data Binding 02:37:53 Section Intro Directives 02:38:32 What is Angular Diresctive? 02:40:44 NgFor Directive 02:47:22 Fetch Object Array 02:53:03 Angular Change Detection 02:58:18 Usage of Array Index 03:01:11 NgIf Directive 03:06:06 NgTemplate Directive 03:10:29 NgSwitchCase Directive 03:17:40 NgStyle Directive 03:22:11 NgClass Directive 03:25:26 Structural Directive VS Attribute Directives 03:29:40 Task 03:31:11 Solution I 03:36:36 Solution II 03:43:10 Section End 03:43:56 Section Intro Pipes 03:44:21 What is Angular Pipes & types of Pipes 03:45:30 Uppercase Lowercase Pipes 03:47:45 Number Pipes 03:51:40 Currency Pipes 03:55:22 Date Pipes 03:57:35 JSON Pipe 03:59:21 Precent Pipe 04:00:37 Slice Pipe 04:02:51 Custom Pipe I 04:08:06 Custom Pipe II 04:11:03 Create Custom Pipe Using Angular CLI 04:13:08 Custom Pipes With Arguments 04:17:13 Section Intro - Angular Services 04:17:46 What is Angular Service 04:20:13 Create Angular Service Manual 04:22:25 Dependency Injection 04:28:42 DI Providers and Injectable Decorator 04:35:55 Generate Angular Serviec Using Angular CLI 04:37:46 Usage of Angular Service 04:41:29 Angular Interface 04:49:04 Section End 04:49:27 Section Intro - Template Driven Forms 04:49:59 Angular Forms Types 04:51:50 Creating Bootstrap Forms 04:56:53 NgForm Directive 05:01:43 NgForm & Form Group Class 05:05:27 NgModel & FormControl Class 05:09:45 Form Validation 05:16:47 Styling Invalid Inputs 05:19:53 Form Validation Types 05:22:22 Validating Email Input Field 05:25:18 Validating Text Area 05:26:17 Error Fix 05:26:48 Styling All invalid input fields Validation Error 05:27:58 Form Submission 05:30:44 Disable Submit Button 05:32:50 Section End 05:33:17 Section Intro Reactive Forms 05:33:53 Reactive Form Setup 05:36:47 Creating Reactive Form Controls Programmatically 05:42:42 Reactive Form Basic Validations 05:44:51 Reactive Form Adding Multiple Validations 05:46:58 Complete all Validations 05:57:04 Reactive Form Submit and Getting Form Values 06:00:47 Nested Form Groups 06:08:30 Reactive Form Array 06:18:53 Reactive Form Builder 06:26:26 Adding Custom Validations I 06:33:24 Adding Custom Validations II 06:40:59 Section End 06:41:52 Section Intro - Angular Routing & Navigation 06:42:29 What is Angular Routing & Navigation 06:44:09 How to implement Angular Routing & Navigation 06:45:10 Create New Angular App 06:47:20 Configure Angular Router 06:52:42 Angular Router Outlet 06:55:21 Angular Router Link 06:57:00 Angular Base URL 07:00:10 Angular Base Router 07:02:08 Router Vs Href 07:06:07 Angular RouterLinkActive 07:08:39 Router Parameter Variables 07:14:36 Get Router Parameters 07:19:52 What is Observable 07:23:54 Observable Subscribe 07:25:45 Observable Next 07:28:05 RXJS Observable Vs Functions 07:30:31 Synchronous Vs Asynchronous Programming 07:34:10 Observable Subscribe & Unsubscribe 07:36:49 Multiple Router Parameters 07:40:02 Query Parameters 07:46:22 Separate Module for Angular Routing 07:52:38 Navigate Programmatically 07:56:28 Wild Card Routers 08:00:07 Section End (Angular Routing & Navigation)

This is the Best Angular Tutorial i have ever seen. i could not hold my hand after learn from your video. So i've contribute something for your teaching. you conveyed the knowledge Beautifully. Thanks a lot.

Highly recommended for beginners.. who are searching for a clarity understanding inside Angular..✌

Bro this course is a premium level course. I thank you from my heart. Made it so much easy to shift from React to Angular

For those that are just now using this tutorial, there obviously has been updates. Angular puts out updates every 6 months. When sharing data from parent to child following the tutorial you might run into an error. The solution is: @Input() fromParent!: string; This will allow angular to assign the value coming from the parent at runtime.

Beside solution , at 2:51:43 you can solve the problem on other way . First I had to export the interface in the app.component.ts file. You can name it how you like it, I choose Post for this exercise. export interface Post { id: number; testTitle: string; } Then I had to replace with the Post interface: objArray: Array = [ { id:1, postTitle: 'Post 1'}, { id:1, postTitle: 'Post 2'}, { id:1, postTitle: 'Post 3'}, { id:1, postTitle: 'Post 4'}, { id:1, postTitle: 'Post 5'}, ];

Im 1.5 hrs into the course. You have taught me more than I learnt in the last 2 months in my class. Hats off to you. god bless u

Really proud of you as a Sri Lankan!!!

the best ever tutorial on Angular I have come across .. Thank you so much for your hard work to make it so easy for learners

Great tutorial. Simple English. Very crisp explanation. Thanks a ton!

i have watched countless tutorials, but you are definitely one of the best, if not the best out there for tutorials, i did your blog website tutorial and it was amazing! first time i was independently able to do something after just watching your tutorials!

This guy made it impossible for me to want to learn from anyone else Youre an awesome teacher 👏

great content, I'm a beginner in Angular and your teaching is really helping me to understand it easily. Thanks a lot ❤

at 3:07:37 : doesn't work anymore (in 2023), you have to nest the div in a ... tag in newer versions of Angular.

I've taken a lot of courses to skill up, this might be the most well paced and well done courses I've taken. Great work

Thank you, ctAcademy mentor! I'm a back-end developer, and I've been putting a lot of effort into learning front-end technologies. I tried multiple times and eventually gave up. However, I persisted and managed to grasp frontend development gradually after watching your instructional videos. Your teaching style is incredibly clear, not only focusing on practical aspects but also helping me understand the fundamental concepts of front-end development. With the knowledge you've provided, I can now continue to expand my skills and knowledge in this field. I am truly grateful for guiding me through the gateway to full-stack development!

I have seen many tutorials and videos on youtube including udemy, but I don't find this kind of explanation, very simple , and straight forward, great content for free . Thank you

thank you a lot ! I watched many videos but only you show angular detailed and clearly, step by step for beginner

At 1:21:17 (ViewChild decorator), I have a doubt. The decorator argument is just the name of the child component class (PostComponent). What if there is more than one instance of this child class, and we're interested in only one particular instance of the child class ? In such a case, what would be the result of the ViewChild decorator on the attribute called "childComp" refer to ? Which of the multiple instances would it point to ? How can I access only one particular instance of the child class, out of the multiple instances ?

Your Angular tutorial is fantastic! Your teaching style is clear and insightful, and it has made learning these concepts much easier for me as a beginner. Thank you for sharing your knowledge and expertise with us. You have positively impacted my learning journey, Keep up the fantastic work, and please keep sharing your incredible content with us! Thank for the amazing tutorial!

For those stuck at the reactive form part, he added a method in his component.ts file as such get fullname (){ return this.form.get('fullName'); } You can otherwise just use "form.get('fullName')?.touched" and so on for all the places you use it in the ngIfs. I spent more than 2 hours trying to figure that out

Thank you so much! Your course is helping me a lot!

Mate, you are god gifted! Thank you for this course.

I love this .... Version has changed a little bit but still i love this tutorial and instructor

the best tutorial for beginners like me! thanks.

You are so good. Patiently explained the topics so well. Thank You so much!

This is the most concise Angular tutorial video I've seen on RU-vid. So much knowledge contained in the video and easy to follow. Thank you

Unbelievably amazing tutorial...u covered all small things Learnings as well and the intention to teach is visible ...really really appreciate it...the course is structured is the best way possible...thr can't be any better tutorial than this...

Love the energy you bring to your videos!

Great work, thanks a lot 👍and it was just in time because I wanted to refresh my memory a bit to get to work again with angular

Hello sir thank u so much for the angular tutorial this is really helped me to understand angular from scratch :) done a great job u deserve more views.

Ultimate stuff pertaining to Angular on RU-vid. Tons of thanks sir.

Best course, best explanation, topics covered thoroughly, learning no language will be difficult if we get such great tutorials. Thanks for this wonderful course

kudos to this man, all we need is in here in the video, easy to understand and he explained it very well

This course is brilliant! Very in depth, seriously. 🙏🏼🙌🏼

well explained. Thank you 🙏👏

Thank you so much. This is the best tuto on Angular I have seen so far.

In 4:16:38 you can assign default value to length within the parameter description itself like this: transform(value: string, length: number = 10): unknown { return value.substring(0, length); } This way, the argument length will take the default value as 10 if we don't pass any. This is the standard way of doing it and you can remove the if-block.

Thank you so much sir. I literally appreciate your hard work in bringing this content on youtube. I damn appreciate you for the time you spent on this content where all concepts are explained very precisely. I once again want to thank you. take a bow for him it might be 8 hours content for us but surely I know you might have spent atleast a week in bringing this video to youtube🙌

Hope you keep doing more angular work. I am still learning JavaScript but seeing Angular code from the outside just seems so interesting and I love the way everything seems structured. I wanted to know if it’s a friendly framework for people coming from vanilla JavaScript because I heard it’s not beginner friendly?

If it's your first time searching on youtube to learn angular, believe me it's really good. Although i haven't searched for another options because i really don't feel like i need another course to complete my angular basics. Highly recommended😁⭐⭐⭐⭐⭐

Completed @3:17:00. understood all the concepts. Will update my review after completing the 6 hours & then entire 8 hours.

Hi @OctAcademy, Can u please share the material , which you have explained in the video?

This is one of the well organized series of tutorials for Angular Loved it ..Thank You for this series it has helped me alot

Thank you for providing such great content! As a beginner, I find this video tutorial to be incredibly useful and beneficial for learning Angular. I also watched part 2 of your video tutorial where you explain the process of building a complete project from beginning to deployment using Angular and Firebase. It was an excellent tutorial, and I learned a lot. I am also interested in learning more about building MEAN stack projects. Do you have any tutorials or insights on building MEAN stack applications from start to finish? It would be great to learn from your experience.

Thank you. This is the best tutorial on Angular I have ever seen.

Best angular tutorial ever, keep up the good content.

@4.35 mins ,when using injectable in service class then we don't need to add in the providers of app module?

At 1:37:20 , how the html code of parent is working? I mean is it waiting for the triggered event to be caught by parent and then go to the p tag and one more thing is do we handle events in similar way in angular like clicks, form submits, etc At 2:20:16, why both input boxes are behaving at same time when only one input box is in focus

If your´re getting an error on 1:13:18 it´s because you have to set an = ' ' after define the type string to itialize the @input data share btw parent and children components.

You made a part of very good job!👍👌

How can I get the collection document id? I will be needed it because I will access my sub collection before that. Is that possible? Thank you in advance.

Great Explanation. Thank You for this video.👍👍👍👍

Why are we using a hook like AfterViewInit to avoid undefined, when we can simply create an instance of the child component? For example: @ViewChild(ChildComponent) childComp: ChildComponent = new ChildComponent(); Constructor(){ console.log(childComp); } Sorry, newbie at Angular. Trying to wrap my head around these things.

thank you so much Sir, may God bless you. I really enjoyed this series

Such a wonderful tutorial! Thank you and I learned, made some notes and enjoyed whole 8 hours of this tutorial. I am studying front-end development, so I can start my new career as a full-stack developer and this helped me greatly. Of course I subscribed.

If you have an error around the 1:14:12 timeframe, and its the because of the property initialization, here is one solution; in the post.component.ts file just put a ! before the string, like this ( fromParent!:String;).

This is one of the most amazing tutorial over the RU-vid on Angular.Thanks a lot for this awesome course.

great video! you have a very soothing voice and I like the fact that you explain calmly, clearly and concisely. I also listened to the video before sleep, because then the subconscious mind is the most receptive and I understand much more, and repeating this study method, I was surprised that, the following days when I resumed the study, I already felt comfortable with the theory. Thanks for this great tutorial!

Which icon theme are you using for vs code in this video?

Hello, thank you for the wonderful tutorial. I'm having issues on 6:40 where on the html the validation error not showing. I am using Angular 17.

All my thanks and all the respect to you for the high quality content, you helped me a lot shifting from react to angular

Thank You!! perfect tutorial

Great tutorial. Thank you very much for Great quality. It's really outstanding tutorial. Keep posting.

I am currently learning Angular from your videos...They are just amazing. You teach really well. I am also a REACT enthusiast. So please make the same full course of REACT latest as same as Angular. Please please 🙏

thank you sir 🙏👍

great tutorial ... very helpful and thanks for posting this.

At 1:29:00, I'm not able to display message in p tag, I get an error in the console stating that ExpressionChangedAfterItHasBeenCheckedError

Awesome course! Congrats!

Thank you so much Sir! The best tutor ever

Angilar CLI command that is .. 'ng g c login' is not working in my system what should I do

Detailed video👏. Can you make the video showing the updates in angular 17

Which angular version and node version you have used please confirm

In reactive forms validation write *ngIf=form.controls.fullName.touched like this add form.controls. before every ngif condition

Thank you so much, very helpful

really a great course introduces one to each and every syntax used in angular, NOTE : while installing you will most probably install latest version and there are some changes in angular syntax which differs from this course

Get() in ts file is part of Typescript?( Reactive forms)

you made complex topics... so easy.. i loved it so much.. 💓

As per the form builder , you told that we no need to add getter method. why you add get fc() method , time: 6:30:00 ?

7:30 I don't understand the value in using Angular or JS to set the class compared to just class="(ClassName)" in HTML.

@5:08:06, On event mappping to the ngModel template (change) = getValue(fName) ->, I am facing a compilation error saying, Argument of type 'NgModel' is not assignable to parameter of type 'FormControl'. Type 'NgModel' is missing the following properties from type 'FormControl': defaultValue, setValue, patchValue, getRawValue, and 37 more.ngtsc(2345) In ts file, I have: getValue(fNameModel: FormControl) { console.log(fNameModel); } In html file, I have: Can anyone please help me with what can be the reason and solution / fix for this.

Which version of the Augular is used in this video? (Im looking for v16)

worth watching!

Hi .. Your course is excellent. i started morning.. and continuously watched and completed 90 minutes. I never watched any course continuously for this hour. Clarification required on templateUrl & styleUrls.. why styles used plural here.

Man your teaching skills are mind blowing

Really this is the nice explanation from scratch it deserve more likes👍

5:45:12 you forget some critical parts: 1. you forget to tell where is this part come from and why it is important: - get fullname() {return this.form.get('fullName')} 2. you forget to mention that in order "Validators.required"(or any kind of "Validators.") to work, you need to import Validators lib from '@angular/forms' this is just me pointing out some missing little detail that you forget to mention, your lecture is still great :D

very informative tutorial. thanks

The best ever tutorial on angular i have come across..Thank you sir !!

Hi thanks for this wonderful video. However, I noticed that I don't have the environments folder in my project, please is it because I'm using the latest version or because I didn't install the framework properly on my terminal?

At 04:35:16 the instructor is using the @Injectable decorator inside the class, this is probably an honest mistake. You have to use the decorator outside the service class. Absolutely amazing course though, It's been 3 days since I started learning Angular using this course and I'm loving it.

So helpful. Do u have any tutorials in the form of pdf, ppt or something like that?

Thank you very much, Sir.

Love this brother. Keep up the good work.

my angular in development mode, how to change to production mode, plz help me

I M starting this today onwards

Overall a great course but the forms sections need to be updated. Thanks for sharing!

hi, when I created a new app with ng new command, app.module.ts file is not generated by default, it seems odd to create manually. Is there any possible explanation for this?

Omg this course is wonderful. Your way of teaching and explaining concepts is motivating us to listen more. It is amazing ! Thank you so much sir. Please do a tutorial on springboot if possible. We are able to understand your way of teaching easily. Thanks for saving us.

Hi run into problem after command ng new AngIntro : ERESOLVE unable to resolve dependency tree ?