Angular Full Course - Complete Zero to Hero Angular full Tutorial

  Рет қаралды 605,530

OctAcademy

OctAcademy

Күн бұрын

Пікірлер: 504
@OctAcademy
@OctAcademy 3 ай бұрын
Thank you so much for watching! If you enjoyed the content and feel like you’ve learned something valuable, please consider supporting the channel on Patreon. Your support helps me keep creating and improving the content you love. Even just $1 a month makes a big difference. Thank you for being a part of this journey! Patreon Link - bit.ly/3RR9yix
@ProtikPC_pro_indigo
@ProtikPC_pro_indigo 12 күн бұрын
Please zoom in on the screen a little bit more when you're recording, so that the lines of code are clearly visible without having to put stress on the eye. Pl remember this while recording your next tutorial. Thanks.
@lukmanhakkim333
@lukmanhakkim333 Жыл бұрын
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.
@amishaphabba7981
@amishaphabba7981 Жыл бұрын
As you have completed the course, do you feel like most of the topics are covered in this ? I mean If you complete this video will you know the major chunk of angular ?
@lukmanhakkim333
@lukmanhakkim333 Жыл бұрын
@@amishaphabba7981 i hope so..
@abhi369g
@abhi369g Жыл бұрын
​@@amishaphabba7981Yes
@gintoki_sakata__
@gintoki_sakata__ Жыл бұрын
​@@amishaphabba7981try the course and find out your self
@gintoki_sakata__
@gintoki_sakata__ 9 ай бұрын
​@@amishaphabba7981do it and find out
@seyedatheeq4562
@seyedatheeq4562 9 ай бұрын
54:31 - day 1 of 10 1:38:52 - day 2 of 10 2:23:17 - day 3 of 10 (Task-1) - todo - ✓ 2:52:47 - day 4 of 10 03:28:55 - day 5 of 10 (Task-2) - todo - ✓ 4:36:37 - day 6 of 10 5:01:09 - day 7 of 10 5:35:01 - day 8 of 10 (Task-3) - todo - ✓ Forms 7:19:07 - day 9 of 10 8:00:42 - day 10 of 10 (task-4) - todo - ✓ angular router
@surajdubey4484
@surajdubey4484 5 ай бұрын
Thank you for timestamp
@DevSharma-ez1gx
@DevSharma-ez1gx 3 ай бұрын
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 Emitter 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 Directive? 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: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 Percent Pipe 04:00:37 Slice Pipe 04:02:51 Custom Pipe I 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 Service Using Angular CLI 04:37:46 Usage of Angular Service 04:41:29 Angular Interface 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: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: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
@jillasridatta7370
@jillasridatta7370 2 ай бұрын
Thank you, It was a huge help ☺️
@ProtikPC_pro_indigo
@ProtikPC_pro_indigo 10 күн бұрын
Hey @OctAcademy, Around 5:47 of this video, the audio is speaking something and the video is demonstrating something else! What have you done ???
@onkarpatil8841
@onkarpatil8841 9 ай бұрын
Completed @3:17:00. understood all the concepts. Will update my review after completing the 6 hours & then entire 8 hours.
@wherewhat
@wherewhat 4 ай бұрын
What's your review? Please share your experience. I've never worked with Angular before and this is the first time ever I landed on an Angular course.
@SonicFictionTV
@SonicFictionTV Жыл бұрын
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'}, ];
@akshayasharmidevi2567
@akshayasharmidevi2567 Жыл бұрын
Highly recommended for beginners.. who are searching for a clarity understanding inside Angular..✌
@AmongUs-qt3uo
@AmongUs-qt3uo Жыл бұрын
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
@OctAcademy
@OctAcademy Жыл бұрын
I'm truly humbled by your feedback! I'm delighted to hear that you've found the course helpful Thank you for your kind words 🌟🚀😊
@CalebStephensPlaysPiano
@CalebStephensPlaysPiano Жыл бұрын
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.
@biswajitrout9814
@biswajitrout9814 Жыл бұрын
great
@OctAcademy
@OctAcademy Жыл бұрын
Thank you for sharing this :)
@3FK5
@3FK5 Жыл бұрын
Thank you for this
@brocode04
@brocode04 Жыл бұрын
yeah even I was wondering why isn't it working for me, thanks fully the typescript shows the error and the solutions!
@Criscode85
@Criscode85 Жыл бұрын
this works for me: @Input() fromParent:String = ' ';
@CoderboyPB
@CoderboyPB Жыл бұрын
at 3:07:37 : doesn't work anymore (in 2023), you have to nest the div in a ... tag in newer versions of Angular.
@suryanshsingh7342
@suryanshsingh7342 Жыл бұрын
Thank you so much for this!
@OctAcademy
@OctAcademy Жыл бұрын
React Full Course - kzbin.info/www/bejne/imHZlpqIqtuJY5Y 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 - kzbin.info/www/bejne/bKvZYoOKqtZ8f8U (Learn to build a Full Angular App) Angular Application From Scratch - kzbin.info/www/bejne/hIi9n5yAe56tjpY Figma Web Design Course - kzbin.info/www/bejne/l3Skg6qfbMpkaZI 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)
@ramazborchashvili7976
@ramazborchashvili7976 Жыл бұрын
thank you for everything! bro which color theme did you use in visual studio code in this video?
@Truysジャ
@Truysジャ Жыл бұрын
How many apps have u built in this video and what are those apps?
@kattarakesh7353
@kattarakesh7353 5 ай бұрын
i cant find karma.conf.js
@Isha_Sethi
@Isha_Sethi Жыл бұрын
Thanks
@SaraanAsim
@SaraanAsim Жыл бұрын
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
@softwee3604
@softwee3604 Жыл бұрын
In 4:16:40, if you got an error error TS2554: Expected 2 arguments, but got 1 Just make length parameter Optional as follows : length ?: number Then, it supposed to work :) Because from now on you handle the case if length parameter is not passed in the template
@srivarshamopati9814
@srivarshamopati9814 Жыл бұрын
Thanks!
@OctAcademy
@OctAcademy Жыл бұрын
Wow Thank you so much for your support, the biggest tip i ever got :)
@brocode04
@brocode04 Жыл бұрын
Really proud of you as a Sri Lankan!!!
@tkumar9067
@tkumar9067 Жыл бұрын
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!
@OctAcademy
@OctAcademy Жыл бұрын
Great to hear!
@harisankar2010
@harisankar2010 11 ай бұрын
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
@leandrogehlen4202
@leandrogehlen4202 Жыл бұрын
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.
@jasjeet30
@jasjeet30 Жыл бұрын
Thanks
@amp1976f
@amp1976f Жыл бұрын
@Input() fromParent ='';
@amp1976f
@amp1976f Жыл бұрын
Thank you
@amp1976f
@amp1976f Жыл бұрын
Also on 1:24:33 goes @ViewChild(PostComponent) childComp=' ';
@Fanflows
@Fanflows Жыл бұрын
@@amp1976f thank you @annie. you save my ass in this part.
@dinisrak7267
@dinisrak7267 Жыл бұрын
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;).
@softwee3604
@softwee3604 Жыл бұрын
Solution for the error : TS2322: Type 'HTMLDivElement' is not assignable to type 'TemplateRef'. in 3:07:00 : There is no data to fetch ... Use ng-template tag instead of a div
@gintoki_sakata__
@gintoki_sakata__ 11 ай бұрын
This guy made it impossible for me to want to learn from anyone else Youre an awesome teacher 👏
@first-chaitanya
@first-chaitanya Жыл бұрын
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 ?
@anuvindm2092
@anuvindm2092 Жыл бұрын
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.
@muthu1046
@muthu1046 Жыл бұрын
Thanks!
@OctAcademy
@OctAcademy Жыл бұрын
Wow ! Thank you very much for your support :)
@treefrog9392
@treefrog9392 Жыл бұрын
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
@OctAcademy
@OctAcademy Жыл бұрын
Thank you very much for your kind words! I'm thrilled to hear that you've found the courses well-paced and well-done. Your feedback is greatly appreciated
@vovanhung9406
@vovanhung9406 7 ай бұрын
in 5:44:38 you need to change your code become like this The full name is required Full name must be at least 5 characters and comment the previous form in the previous session. It will work. Hope this can help u
@andreadigiovanni8655
@andreadigiovanni8655 5 ай бұрын
REQUIRED! Min length must be at least 3 characters! A pair of safe operators added :)
@RaviSoni-mt7wm
@RaviSoni-mt7wm Жыл бұрын
Ultimate stuff pertaining to Angular on KZbin. Tons of thanks sir.
@OctAcademy
@OctAcademy Жыл бұрын
Glad it was helpful!
@amdlina2999
@amdlina2999 5 ай бұрын
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!
@OctAcademy
@OctAcademy 5 ай бұрын
Thank you! 😊
@subramanyaaithal4422
@subramanyaaithal4422 4 ай бұрын
You are so good. Patiently explained the topics so well. Thank You so much!
@himanshufulmali9225
@himanshufulmali9225 Жыл бұрын
great content, I'm a beginner in Angular and your teaching is really helping me to understand it easily. Thanks a lot ❤
@OctAcademy
@OctAcademy Жыл бұрын
Happy to hear that!
@udaykathari8195
@udaykathari8195 Жыл бұрын
2:07:20 day 1 3:30:50 day2
@santoshkumarverma8443
@santoshkumarverma8443 Жыл бұрын
Great tutorial. Thank you very much for Great quality. It's really outstanding tutorial. Keep posting.
@OctAcademy
@OctAcademy Жыл бұрын
Thanks, will do!
@B.NR123
@B.NR123 6 ай бұрын
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.
@OctAcademy
@OctAcademy 5 ай бұрын
Glad you enjoy it!
@srikarravoori124
@srikarravoori124 Жыл бұрын
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
@salilthegreat
@salilthegreat Жыл бұрын
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😁⭐⭐⭐⭐⭐
@OctAcademy
@OctAcademy Жыл бұрын
Great to hear! Thank you very much for your support :)
@prasad_vlog
@prasad_vlog 4 ай бұрын
you made complex topics... so easy.. i loved it so much.. 💓
@OctAcademy
@OctAcademy 4 ай бұрын
Glad you like it
@arvendrajan1430
@arvendrajan1430 Жыл бұрын
5:10:58 === ERROR==== getValue(f: FormControl) { console.log(f); } (change)="getValue(fullName)" ++++ Solution ++++ getValue(f: NgModel) { console.log(f); } -> Change FormControl to NgModel -> Because NgModel for template driven form and FormControl is for reactive form -> Once change we able to console log object for input
@aarondiaz2506
@aarondiaz2506 Жыл бұрын
thank you! you saved me! is a version problem? because it works for him
@kenkaneki669
@kenkaneki669 Жыл бұрын
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.
@OctAcademy
@OctAcademy Жыл бұрын
Thank you very much for the information :)
@badakh301
@badakh301 Жыл бұрын
thanks bro i was stuck here and wasted almost 30mins.
@jerryarekhandia1003
@jerryarekhandia1003 Жыл бұрын
This is the most concise Angular tutorial video I've seen on KZbin. So much knowledge contained in the video and easy to follow. Thank you
@OctAcademy
@OctAcademy Жыл бұрын
Glad it was helpful!
@shantisuma7738
@shantisuma7738 Жыл бұрын
@@OctAcademy bro why do we have to write observable functions in ngoninit how we can know which functions we should write in the constructor or in ngoninit plse explain bro plse
@OctAcademy
@OctAcademy Жыл бұрын
@@shantisuma7738 In Angular, the ngOnInit hook is a lifecycle hook that is called after Angular has initialized all data-bound properties of a directive. The constructor of a component is called before the component is initialized, and is typically used for dependency injection and the initialization of class fields. It is generally a good idea to put any initialization logic that relies on the component's data-bound properties in the ngOnInit hook, rather than in the constructor, because the component's data-bound properties will not be initialized until after the constructor is called. For example, if you have a component that displays a list of items and the list of items is stored in a data-bound property called items, you should retrieve the list of items in the ngOnInit hook rather than in the constructor, because the items property will not be initialized until after the constructor is called. On the other hand, if you have initialization logic that does not rely on the component's data-bound properties, you can put that logic in the constructor. For example, if you need to inject a service into your component, you can do that in the constructor. I hope that helps to clarify the difference between the constructor and ngOnInit hook in Angular
@shantisuma7738
@shantisuma7738 Жыл бұрын
@@OctAcademy tq u soo much bro
@codemaster4853
@codemaster4853 Жыл бұрын
thank you so much Sir, may God bless you. I really enjoyed this series
@OctAcademy
@OctAcademy Жыл бұрын
So nice of you
@quangminh8580
@quangminh8580 Жыл бұрын
thank you a lot ! I watched many videos but only you show angular detailed and clearly, step by step for beginner
@OctAcademy
@OctAcademy Жыл бұрын
You are welcome! :)
@Dadaskis
@Dadaskis Жыл бұрын
5:21:59 In new versions of Angular, i've got an error here: fullName.errors.required If you want to write this thing correctly in newer versions, without any errors, you will have to write this: fullName.errors?.['required'] I'm still not sure why did they made it so dirty, it makes me sad, but it is what it is :(
@vinaychandu1017
@vinaychandu1017 Жыл бұрын
Thanks for solution
@vovanhung9406
@vovanhung9406 7 ай бұрын
tks u very much
@adityasoni2761
@adityasoni2761 Жыл бұрын
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.
@OctAcademy
@OctAcademy Жыл бұрын
Glad to hear that
@PeanutDev
@PeanutDev Жыл бұрын
7:46:11 Observable
@deeksha6514
@deeksha6514 Жыл бұрын
This is one of the most amazing tutorial over the KZbin on Angular.Thanks a lot for this awesome course.
@OctAcademy
@OctAcademy Жыл бұрын
Wow, thanks!
@caleb_riordan
@caleb_riordan Жыл бұрын
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
@softwee3604
@softwee3604 Жыл бұрын
Solution II : If you're using an Angular version 13+, proceed as follows to check required value : This will check if errors is null before check its "required" value
@yashainu6047
@yashainu6047 Жыл бұрын
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!
@OctAcademy
@OctAcademy Жыл бұрын
You're very welcome! I'm thrilled to hear that my videos helped you break into front-end development and that you found my teaching style effective. Your persistence paid off, and I have no doubt you'll continue to excel in expanding your skills. Best of luck on your journey to full-stack development! 🌟🚀
@DeepikaYadav-f2s
@DeepikaYadav-f2s Жыл бұрын
Thank you. This is the best tutorial on Angular I have ever seen.
@OctAcademy
@OctAcademy Жыл бұрын
Glad You Like it :)
@techterror
@techterror 4 ай бұрын
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 ?
@ProtikPC_pro_indigo
@ProtikPC_pro_indigo 10 күн бұрын
Hey @OctAcademy, Around 5:47 of this video, the audio is speaking something and the video is demonstrating something else! What have you done ???
@arnabmukherjee5840
@arnabmukherjee5840 9 ай бұрын
Awesome man. Really appreciate.
@OctAcademy
@OctAcademy 9 ай бұрын
Glad you liked it!
@idenizbal9706
@idenizbal9706 Жыл бұрын
1:14:15 @Input() fromParent:string; is wrong so you have to do @Input() fromParent:string=' ';
@user-py1gn4kq5v
@user-py1gn4kq5v 3 ай бұрын
Crct bro
@ayusharyan2165
@ayusharyan2165 Жыл бұрын
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
@zoro9878
@zoro9878 Жыл бұрын
Mate, you are god gifted! Thank you for this course.
@juniorMr
@juniorMr Жыл бұрын
Man your teaching skills are mind blowing
@Isha_Sethi
@Isha_Sethi Жыл бұрын
Very true!!!!
@shraddhakoli106
@shraddhakoli106 4 ай бұрын
The best ever tutorial on angular i have come across..Thank you sir !!
@OctAcademy
@OctAcademy 4 ай бұрын
Thank you for your support and 😊
@wawariro2247
@wawariro2247 4 ай бұрын
i know the basics of html css and javascript but only the basics is it easy for me to understand angular from this tutorial or do i need other Prerequisites?
@OctAcademy
@OctAcademy 4 ай бұрын
@@wawariro2247 You can understand this course with the basic knowledge of web fundamentals
@anonysmooth648
@anonysmooth648 Жыл бұрын
kudos to this man, all we need is in here in the video, easy to understand and he explained it very well
@OctAcademy
@OctAcademy Жыл бұрын
I appreciate that!
@badabeta6973
@badabeta6973 11 ай бұрын
Detailed video👏. Can you make the video showing the updates in angular 17
@harish.bhuvanachandar
@harish.bhuvanachandar 7 ай бұрын
Great tutorial. Simple English. Very crisp explanation. Thanks a ton!
@abhi369g
@abhi369g Жыл бұрын
Bignner Friendly... Best course ❤
@OctAcademy
@OctAcademy Жыл бұрын
Glad you think so!
@MostafaMASLOUHI
@MostafaMASLOUHI Жыл бұрын
Thank you so much. This is the best tuto on Angular I have seen so far.
@OctAcademy
@OctAcademy Жыл бұрын
Glad it was helpful!
@AkshitaSingh-j1d
@AkshitaSingh-j1d Жыл бұрын
Best course, best explanation, topics covered thoroughly, learning no language will be difficult if we get such great tutorials. Thanks for this wonderful course
@OctAcademy
@OctAcademy Жыл бұрын
Thank you for your kind words! I'm delighted to hear that I found the course helpful and the explanations thorough. I'm here to support your learning journey, and I appreciate your feedback. Keep up the great work! 🌟👏
@qaiswaleed42
@qaiswaleed42 2 ай бұрын
Amaaazing tutorial, thank you so much ♥
@vitanfasmon1520
@vitanfasmon1520 Жыл бұрын
At 4:35:23 the @Injectable() has to be declared outside of the class.
@aravindk8243
@aravindk8243 Жыл бұрын
great tutorial ... very helpful and thanks for posting this.
@OctAcademy
@OctAcademy Жыл бұрын
Glad it was helpful!
@anuvindm2092
@anuvindm2092 Жыл бұрын
From 5:48:12 up to the end of that section (5:57:03) the audio is ahead of the video. It's hard to understand what's going on because of audio not syncing with video. The next section onwards, it's normal. I think it happened while you edited.
@OctAcademy
@OctAcademy Жыл бұрын
Sorry For this, working on the brand new Angular full tutorial, stay tuned :)
@vovanhung9406
@vovanhung9406 7 ай бұрын
@@OctAcademy where? LOL, u skip until now and don't release anything about Angular
@andreiaribas4718
@andreiaribas4718 Жыл бұрын
Thank you so much! Your course is helping me a lot!
@anghai9858
@anghai9858 Жыл бұрын
the best tutorial for beginners like me! thanks.
@_sudipb
@_sudipb Жыл бұрын
Great Explanation. Thank You for this video.👍👍👍👍
@OctAcademy
@OctAcademy Жыл бұрын
You are welcome!
@Ajmris
@Ajmris 9 ай бұрын
You made a part of very good job!👍👌
@syedzubair1471
@syedzubair1471 Жыл бұрын
@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.
@Abhishek-nz2it
@Abhishek-nz2it 10 ай бұрын
same type of error i also faced can you get any solution please share it .
@kishorjoshi842
@kishorjoshi842 Жыл бұрын
This is one of the well organized series of tutorials for Angular Loved it ..Thank You for this series it has helped me alot
@OctAcademy
@OctAcademy Жыл бұрын
Glad to hear that
@RaviPrasad-cq2od
@RaviPrasad-cq2od Жыл бұрын
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!
@OctAcademy
@OctAcademy Жыл бұрын
You're very welcome!
@RohitShakya-r4m
@RohitShakya-r4m 9 ай бұрын
at 5:11:00 if type formControl is not working try assigning with NgModel
@abdelazizabdelioua890
@abdelazizabdelioua890 Жыл бұрын
Best angular tutorial ever, keep up the good content.
@OctAcademy
@OctAcademy Жыл бұрын
Wow, thanks!
@bassam.2023
@bassam.2023 Жыл бұрын
This course is brilliant! Very in depth, seriously. 🙏🏼🙌🏼
@OctAcademy
@OctAcademy Жыл бұрын
Thank you for your feedback, I'm glad you're enjoying the course! 🌟
@Whatekala
@Whatekala Жыл бұрын
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...
@OctAcademy
@OctAcademy Жыл бұрын
Wow, Thank you very much :)
@shabanaasmi2807
@shabanaasmi2807 Жыл бұрын
Thank you so much, very helpful
@OctAcademy
@OctAcademy Жыл бұрын
Glad it was helpful!
@nikitakanade2300
@nikitakanade2300 Жыл бұрын
Really this is the nice explanation from scratch it deserve more likes👍
@OctAcademy
@OctAcademy Жыл бұрын
Thank you :)
@mrityunjaypandey6830
@mrityunjaypandey6830 Жыл бұрын
Best course । Thank you very much
@OctAcademy
@OctAcademy Жыл бұрын
Glad you like it :)
@vihangafernando6644
@vihangafernando6644 Жыл бұрын
hey can you add time-stamps. So we can read before we watch. Thank for sharing knowledge. Respect.
@OctAcademy
@OctAcademy Жыл бұрын
Done!
@sahanperera5688
@sahanperera5688 Жыл бұрын
Love this brother. Keep up the good work.
@OctAcademy
@OctAcademy Жыл бұрын
Appreciate it!
@Criscode85
@Criscode85 Жыл бұрын
if you have a problem in 1:24:37, this is helpful @ViewChild(PostComponent) childComp!:PostComponent;
@ChemsEddineNouioua
@ChemsEddineNouioua Жыл бұрын
All my thanks and all the respect to you for the high quality content, you helped me a lot shifting from react to angular
@tamilarasu9829
@tamilarasu9829 Жыл бұрын
Bro which one best react or angular
@tamilarasu9829
@tamilarasu9829 Жыл бұрын
Bro which one best react or angular
@OctAcademy
@OctAcademy Жыл бұрын
Glad I could help!
@locthiennguyen
@locthiennguyen Жыл бұрын
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
@sarahsusan6342
@sarahsusan6342 Жыл бұрын
Thank you, i was stuck there! Thanks for pointing it out!
@lucasteixeiranl4473
@lucasteixeiranl4473 Жыл бұрын
Awesome course! Congrats!
@OctAcademy
@OctAcademy Жыл бұрын
Thank you! Cheers!
@ayusharyan2165
@ayusharyan2165 Жыл бұрын
I got this error at 1:26:28 main.ts:6 ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ''. Current value: 'chilele'. Expression location: AppComponent component. How to resolve this one?
@navya_1235
@navya_1235 5 ай бұрын
Sir its good lecture please start spring boot with angular
@hanzalasarguroh
@hanzalasarguroh Жыл бұрын
5:10:46 getting error at full name in (change)="getVal(fullName)" in .ts file getVal(f:FormControl){ console.log(f) } but when I put ngModel in place of FormControl in .ts file then error goes but validation doesnt works..means that these line get error plz help already wasted an hour in sorting this issue
@hanzalasarguroh
@hanzalasarguroh Жыл бұрын
got the answer (change)="getValue(fullName.value)" and addd this Full name is required Full name must be at least 5 characters long
@kamanlimbu
@kamanlimbu Жыл бұрын
@@hanzalasarguroh Thank you for your Helpp !!
@ashwinliza1544
@ashwinliza1544 Жыл бұрын
@@hanzalasarguroh Thanks a lot
@ol1175
@ol1175 9 ай бұрын
Best one!
@xiokethakajanadithyaranasi365
@xiokethakajanadithyaranasi365 Жыл бұрын
Thank You!! perfect tutorial
@OctAcademy
@OctAcademy Жыл бұрын
Glad you liked it!
@bidhandas1851
@bidhandas1851 Жыл бұрын
Sir, In Angular CLI 15.2.8, Reactive form basic validation - Time- 5:42:43 is not working. Kindly help me to solve it.
@vovanhung9406
@vovanhung9406 7 ай бұрын
you need to change your code become like this The full name is required Full name must be at least 5 characters and comment the previous form in the previous session. It will work. Hope this can help u
@shorts-kc4ii
@shorts-kc4ii 5 ай бұрын
Just pleeeeease someone answer meeee !!! Should I learn anything about programming before I start this course??? I don't know java script or any other programming language Someone answer please❤❤
@nivethaselvam3415
@nivethaselvam3415 Жыл бұрын
Sir can you please put a video for this task- Once I click Button first time, then 1st checkbox should tick(Checked) If I click the same button 2nd Time, 1st checkbox should unselect and 2nd checkbox should select. If I click the same button 3rd Time, 2nd checkbox should unselect and 3rd checkbox should select. Once button clicked 3 times, then disable the button.
@alantown8766
@alantown8766 4 ай бұрын
Amazing course. On point
@OctAcademy
@OctAcademy 4 ай бұрын
Appreciate it!
@paigemundy9257
@paigemundy9257 Жыл бұрын
Overall a great course but the forms sections need to be updated. Thanks for sharing!
@OctAcademy
@OctAcademy Жыл бұрын
Working on it!
@ahmedmohamed-jt4mr
@ahmedmohamed-jt4mr 9 ай бұрын
its a bit slow if you have some experience with Angular already. but extreamly useful video
@OctAcademy
@OctAcademy 9 ай бұрын
Noted
@MrNexusExe
@MrNexusExe 10 ай бұрын
I love this .... Version has changed a little bit but still i love this tutorial and instructor
@appajikvlogs
@appajikvlogs 5 ай бұрын
forms concept felt little tough remaining was good, i have completed this video in 2 days thank you
@OctAcademy
@OctAcademy 5 ай бұрын
Keep it up
Angular Tutorial for Beginners: Learn Angular & TypeScript
2:02:42
Programming with Mosh
Рет қаралды 4,5 МЛН
Чистка воды совком от денег
00:32
FD Vasya
Рет қаралды 4,9 МЛН
I thought one thing and the truth is something else 😂
00:34
عائلة ابو رعد Abo Raad family
Рет қаралды 16 МЛН
coco在求救? #小丑 #天使 #shorts
00:29
好人小丑
Рет қаралды 82 МЛН
Learn Angular A-Z: Complete Tutorial for Beginners
4:21:33
Envato Tuts+
Рет қаралды 192 М.
React JS Full Course 2024
10:50:49
Anson the Developer
Рет қаралды 140 М.
SQL: From Zero to Hero - Master SQL with Real-World Examples 🚀
6:28:02
Learn Git - Full Course for Beginners
3:43:34
freeCodeCamp.org
Рет қаралды 925 М.
Learn TypeScript - Full Tutorial
4:46:25
freeCodeCamp.org
Рет қаралды 1,1 МЛН
Angular Crash Course
2:01:32
Traversy Media
Рет қаралды 1,4 МЛН
Angular Crash Course | Learn modern Angular in 90 minutes
1:29:09
Code with Ahsan
Рет қаралды 25 М.