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
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.
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.
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 ?
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
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'}, ];
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.
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.
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!
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 ?
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;).
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
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
@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.
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
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.
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!
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
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 :(
@@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
@@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
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
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
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
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
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.
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😁⭐⭐⭐⭐⭐
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
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!
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! 🌟🚀
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.
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
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.
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?
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.
The error message TS2339: Property 'childMessage' does not exist on type 'string' usually occurs when you are trying to access a property of a string variable that does not exist. Based on the error message, it seems like you might be trying to access the childMessage property on a string variable. This would result in a TypeScript error, since string variables do not have a childMessage property. To fix this error, you need to make sure that you are accessing the childMessage property on the correct object or variable. Double-check that the variable you are trying to access has the childMessage property defined. If you're still having trouble finding the source of the error, please provide me with some additional context or code snippets, and I'll do my best to assist you further.
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...
Best course, best explanation, topics covered thoroughly, learning no language will be difficult if we get such great tutorials. Thanks for this wonderful course
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! 🌟👏
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?
same question bro , if you watched this tutorial tell me ,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?
hi sir going word to word but in parent to child sharing getting an error at @Input() fromParent:String in child class saying "no initializer and is not definitely assigned in the constructor", and when we write like @Input() fromParent!:String ; error gone.
Hi there! It sounds like you are experiencing an error related to initializing an @Input() property in your child component. The error message you received means that the fromParent property doesn't have an initial value in the child component's constructor and TypeScript cannot guarantee that it will be assigned a value before it is used. To fix this error, you can use the non-null assertion operator (!) to tell TypeScript that the fromParent property will have a value at runtime and should not be treated as potentially undefined. However, this approach can be risky, because if the property is actually undefined at runtime, it could lead to unexpected errors. A safer solution is to provide an initial value for the fromParent property in the child component's constructor, like this: export class ChildComponent { @Input() fromParent: string; constructor() { this.fromParent = ' '; } } This way, you can avoid the error message and ensure that the fromParent property will always have a value, even if the parent component doesn't pass one in. I hope this helps! Let me know if you have any other questions.
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!
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?
5:25:36 I did the fix: But still getting the error: Property 'required' comes from an index signature, so it must be accessed with ['required'].ngtsc(4111) I searched for a fix but no luck. Can someone help please? Thanks!
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.
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 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
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.
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.
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 ?
@@amishaphabba7981 i hope so..
@@amishaphabba7981Yes
@@amishaphabba7981try the course and find out your self
@@amishaphabba7981do it and find out
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
Thank you, It was a huge help ☺️
Hey @OctAcademy,
Around 5:47 of this video, the audio is speaking something and the video is demonstrating something else! What have you done ???
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
Thank you for timestamp
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'},
];
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.
great
Thank you for sharing this :)
Thank you for this
yeah even I was wondering why isn't it working for me, thanks fully the typescript shows the error and the solutions!
this works for me:
@Input() fromParent:String = ' ';
Highly recommended for beginners.. who are searching for a clarity understanding inside Angular..✌
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
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 🌟🚀😊
at 3:07:37 : doesn't work anymore (in 2023), you have to nest the div in a ... tag in newer versions of Angular.
Thank you so much for this!
Completed @3:17:00.
understood all the concepts.
Will update my review after completing the 6 hours & then entire 8 hours.
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.
Thanks
React Full Course - ua-cam.com/video/T0vegRuvV-4/v-deo.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 - ua-cam.com/video/6zv1PTuqIIc/v-deo.html (Learn to build a Full Angular App)
Angular Application From Scratch - ua-cam.com/video/NWZniJF9zX4/v-deo.html
Figma Web Design Course - ua-cam.com/video/aCARwi7e130/v-deo.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)
thank you for everything!
bro which color theme did you use in visual studio code in this video?
How many apps have u built in this video and what are those apps?
i cant find karma.conf.js
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
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.
Thanks
@Input() fromParent ='';
Thank you
Also on 1:24:33 goes @ViewChild(PostComponent) childComp=' ';
@@amp1976f thank you @annie. you save my ass in this part.
Thanks!
Wow Thank you so much for your support, the biggest tip i ever got :)
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!
Great to hear!
Really proud of you as a Sri Lankan!!!
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 ?
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;).
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
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
This guy made it impossible for me to want to learn from anyone else
Youre an awesome teacher 👏
Thanks!
Wow ! Thank you very much for your support :)
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
REQUIRED!
Min length must be at least 3 characters!
A pair of safe operators added :)
@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.
same type of error i also faced can you get any solution please share it .
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
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.
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!
Thank you! 😊
Ultimate stuff pertaining to Angular on UA-cam. Tons of thanks sir.
Glad it was helpful!
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 ?
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 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
Hey @OctAcademy,
Around 5:47 of this video, the audio is speaking something and the video is demonstrating something else! What have you done ???
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 :(
Thanks for solution
tks u very much
great content, I'm a beginner in Angular and your teaching is really helping me to understand it easily. Thanks a lot ❤
Happy to hear that!
This is the most concise Angular tutorial video I've seen on UA-cam. So much knowledge contained in the video and easy to follow. Thank you
Glad it was helpful!
@@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
@@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
@@OctAcademy tq u soo much bro
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
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
got the answer
(change)="getValue(fullName.value)"
and addd this
Full name is required
Full name must be at least 5 characters long
@@hanzalasarguroh Thank you for your Helpp !!
@@hanzalasarguroh Thanks a lot
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
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
You are so good. Patiently explained the topics so well. Thank You so much!
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.
Glad you enjoy it!
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😁⭐⭐⭐⭐⭐
Great to hear! Thank you very much for your support :)
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
thank you! you saved me! is a version problem? because it works for him
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!
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! 🌟🚀
kudos to this man, all we need is in here in the video, easy to understand and he explained it very well
I appreciate that!
thank you a lot ! I watched many videos but only you show angular detailed and clearly, step by step for beginner
You are welcome! :)
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.
Thank you very much for the information :)
thanks bro i was stuck here and wasted almost 30mins.
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
7:46:11 Observable
1:14:15 @Input() fromParent:string; is wrong so you have to do @Input() fromParent:string=' ';
Crct bro
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.
Sorry For this, working on the brand new Angular full tutorial, stay tuned :)
@@OctAcademy where? LOL, u skip until now and don't release anything about Angular
you made complex topics... so easy.. i loved it so much.. 💓
Glad you like it
Thank you. This is the best tutorial on Angular I have ever seen.
Glad You Like it :)
Thank you so much. This is the best tuto on Angular I have seen so far.
Glad it was helpful!
Great tutorial. Thank you very much for Great quality. It's really outstanding tutorial. Keep posting.
Thanks, will do!
at 5:11:00 if type formControl is not working try assigning with NgModel
The best ever tutorial on angular i have come across..Thank you sir !!
Thank you for your support and 😊
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?
@@wawariro2247 You can understand this course with the basic knowledge of web fundamentals
At 1:29:00, I'm not able to display message in p tag, I get an error in the console stating that ExpressionChangedAfterItHasBeenCheckedError
Man your teaching skills are mind blowing
Very true!!!!
2:07:20 day 1
3:30:50 day2
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.
Mate, you are god gifted! Thank you for this course.
This is one of the most amazing tutorial over the UA-cam on Angular.Thanks a lot for this awesome course.
Wow, thanks!
1:28:36 , I got an error with ChildMessage , im using angular 16 now. please help
this if the error: ERROR
src/app/app.component.ts:19:33 - error TS2339: Property 'childMessage' does not exist on type 'string'.
Ok , Got it, the exact line should be - @ViewChild( PostComponent) childComp: PostComponent;
whole thing should be:
import { Component, ViewChild,ChangeDetectorRef, AfterViewInit } from '@angular/core';
@ViewChild( PostComponent) childComp: PostComponent;
constructor(private cdr: ChangeDetectorRef) {
}
ngAfterViewInit():void {
this.message = this.childComp.childMsg ;
this.cdr.detectChanges();
}
}
cdr / ChangeDetectorRef resolved another issue displays on inspector
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.
Glad to hear that
thank you so much Sir, may God bless you. I really enjoyed this series
So nice of you
Bignner Friendly... Best course ❤
Glad you think so!
Awesome man. Really appreciate.
Glad you liked it!
At 4:35:23 the @Injectable() has to be declared outside of the class.
at 1:28:38 getting error TS2339: Property 'childMessage' does not exist on type 'string'
The error message TS2339: Property 'childMessage' does not exist on type 'string' usually occurs when you are trying to access a property of a string variable that does not exist.
Based on the error message, it seems like you might be trying to access the childMessage property on a string variable. This would result in a TypeScript error, since string variables do not have a childMessage property.
To fix this error, you need to make sure that you are accessing the childMessage property on the correct object or variable. Double-check that the variable you are trying to access has the childMessage property defined.
If you're still having trouble finding the source of the error, please provide me with some additional context or code snippets, and I'll do my best to assist you further.
use type:any
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...
Wow, Thank you very much :)
Best course, best explanation, topics covered thoroughly, learning no language will be difficult if we get such great tutorials. Thanks for this wonderful course
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! 🌟👏
Great tutorial. Simple English. Very crisp explanation. Thanks a ton!
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?
can anybody tell me should i learn typescript before watching this tutorial? I know react, I am familiar with js, but not with tyoescript
same question bro , if you watched this tutorial tell me ,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?
No need to learn typescript :)
Best angular tutorial ever, keep up the good content.
Wow, thanks!
hi sir going word to word but in parent to child sharing getting an error at @Input() fromParent:String in child class saying "no initializer and is not definitely assigned in the constructor", and when we write like @Input() fromParent!:String ; error gone.
Hi there! It sounds like you are experiencing an error related to initializing an @Input() property in your child component. The error message you received means that the fromParent property doesn't have an initial value in the child component's constructor and TypeScript cannot guarantee that it will be assigned a value before it is used.
To fix this error, you can use the non-null assertion operator (!) to tell TypeScript that the fromParent property will have a value at runtime and should not be treated as potentially undefined. However, this approach can be risky, because if the property is actually undefined at runtime, it could lead to unexpected errors.
A safer solution is to provide an initial value for the fromParent property in the child component's constructor, like this:
export class ChildComponent {
@Input() fromParent: string;
constructor() {
this.fromParent = ' ';
}
}
This way, you can avoid the error message and ensure that the fromParent property will always have a value, even if the parent component doesn't pass one in.
I hope this helps! Let me know if you have any other questions.
This is one of the well organized series of tutorials for Angular
Loved it ..Thank You for this series it has helped me alot
Glad to hear that
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!
You're very welcome!
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?
ng new appname --on-standalone
Thank you so much! Your course is helping me a lot!
5:25:36 I did the fix: But still getting the error: Property 'required' comes from an index signature, so it must be accessed with ['required'].ngtsc(4111)
I searched for a fix but no luck.
Can someone help please? Thanks!
change required to ['required']
Sir, In Angular CLI 15.2.8, Reactive form basic validation - Time- 5:42:43 is not working. Kindly help me to solve it.
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
All my thanks and all the respect to you for the high quality content, you helped me a lot shifting from react to angular
Bro which one best react or angular
Bro which one best react or angular
Glad I could help!
7:30 I don't understand the value in using Angular or JS to set the class compared to just class="(ClassName)" in HTML.
great tutorial ... very helpful and thanks for posting this.
Glad it was helpful!
Hi, can you send me a video or figma view of the design from 1:15 to 1:33?
Which version of the Augular is used in this video? (Im looking for v16)
You made a part of very good job!👍👌
when i download angular folder i am not getting assets and envinoment folder i am adding manually,can you please give a soluation for this problem
in the new version of angular you will not get the assets folder :)
the best tutorial for beginners like me! thanks.
Awesome course! Congrats!
Thank you! Cheers!
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.
Amaaazing tutorial, thank you so much ♥
Thank you so much, very helpful
Glad it was helpful!
Love this brother. Keep up the good work.
Appreciate it!
Really this is the nice explanation from scratch it deserve more likes👍
Thank you :)
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.
Yes sure 😊
@@OctAcademy Thank you so much. I'm really excited to learn from you and can't wait to see your tutorials. Thanks again!❤
Hi, can you please include the link of the part 2 ?
This course is brilliant! Very in depth, seriously. 🙏🏼🙌🏼
Thank you for your feedback, I'm glad you're enjoying the course! 🌟
if you have a problem in 1:24:37, this is helpful
@ViewChild(PostComponent) childComp!:PostComponent;
In reactive forms validation write *ngIf=form.controls.fullName.touched like this add form.controls. before every ngif condition