The first rather difficult lesson in the series. At the first viewing, I begin to get confused in the exchange of data between components. In my opinion, it is much easier to implement a filter in the react.
02:08 @procademy what would be the value if we have four radio buttons in our template. Here we have 3 so we went with 'all' 'true' and 'false' but what about the fourth one??
React is like why Angular why ?? this angular concept is so confusing to understand. I think I need to rewatch this, but this series is great, making learning Angular smoother.
haha same for me these lengthy code but in React we have props for complex we have multiple way of state management but also by learning from here I don't find angular tough except we have to write too much code this is my opinion
Hi @procademy, some of the important files are missing in the repo such as filter.component.ts and product.component.ts files , please update asap , thanks
This is how I break down this concept for easier understanding: The Child component class has three key parts, two are used in its view template and one used in the Parent view template. Child Class parts 1. A declared property of an EventEmitter instance, decorated with @Output() 2. A declared data property to hold the current state 3. A class method to handle events Utilization in Child View 1. Two-way property binding with ngModel directive (i.e., on a HTML tag) to the declared data property 2. Event binding (i.e., change event on the same HTML tag) calling the class method which handles events Parent component class has one key part that is used in conjunction with the remaining key part from the Child component class. Both are used in the Parent view. Parent Class Part 1. A callback method which acts as the event handler, receiving and processing emitted data. Utilization in Parent View 1. Event binding on the selector of the child component (i.e., app-child), to the declared property with the EventEmitter instance. This declared property is from the child component class and is the custom event. 2. Assignment of the callback method which process emitted data, to the custom event. This method should be defined in the Parent component class.
property I do not understand how the property 'selectedFilteredRadioButton' became the standard selector of the radio bullet simply by asigning the value of the tag to it. Can someone please enlighten me?
From Angular documentation: All inputs controlled by ngModel (including those of type radio) will use the value of their name attribute to determine the property under which their NgModelController will be published on the parent FormController. Simply put, I think ngModel can recognize what is the element that they are in, and behave accordingly.
how to get the exact code that you have used in this video , you have provided the repo link , but the code there is different from what you have used here , if you could guide me it would be helpful. cheers!!!. Great explanation btw
you said that "ngModel" is a Built-in structural directive like ngStyle and ngClass, but actually ngStyle and ngClass are not structural directive ! They are attribute directive
Once you will watch it few more times, it will become clear. This concept is a little bit confusing for beginners. I also did not understood this concept in first attempt when i was learning angular :)
Great video and explanation 🔥
The first rather difficult lesson in the series. At the first viewing, I begin to get confused in the exchange of data between components. In my opinion, it is much easier to implement a filter in the react.
writing code is neat and clean. Excellent !
Very nicely explained. thanks.
Excellent sir .....❤
super clear and very detailed tutorials. thanks so much!
02:08 @procademy what would be the value if we have four radio buttons in our template. Here we have 3 so we went with 'all' 'true' and 'false' but what about the fourth one??
It's up to you whatever you want to name. value is used to store the data from HTML Forms this is what I know
Mast Samjhaya
I don't know what to say sir but thanks in a million
React is like why Angular why ??
this angular concept is so confusing to understand.
I think I need to rewatch this, but this series is great, making learning Angular smoother.
haha same for me these lengthy code but in React we have props for complex we have multiple way of state management but also by learning from here I don't find angular tough except we have to write too much code this is my opinion
@procademy Introduction to Angular.pdf is not available, it's showing Unable to render code block...
3:22 you said, " ngModule is structure directive like ngCass and ngStle"!! I think you mean ngIf and ngFor?
Very good
To clarify:
When [value] = [(ngModel)] the radio is selected.
could you please upload a complete project upto this class in the repo, it would be very helpful to keep on the track our learning.
Hi @procademy, some of the important files are missing in the repo such as filter.component.ts and product.component.ts files , please update asap , thanks
This is how I break down this concept for easier understanding:
The Child component class has three key parts, two are used in its view template and one used in the Parent view template.
Child Class parts
1. A declared property of an EventEmitter instance, decorated with @Output()
2. A declared data property to hold the current state
3. A class method to handle events
Utilization in Child View
1. Two-way property binding with ngModel directive (i.e., on a HTML tag) to the declared data property
2. Event binding (i.e., change event on the same HTML tag) calling the class method which handles events
Parent component class has one key part that is used in conjunction with the remaining key part from the Child component class. Both are used in the Parent view.
Parent Class Part
1. A callback method which acts as the event handler, receiving and processing emitted data.
Utilization in Parent View
1. Event binding on the selector of the child component (i.e., app-child), to the declared property with the EventEmitter instance. This declared property is from the child component class and is the custom event.
2. Assignment of the callback method which process emitted data, to the custom event. This method should be defined in the Parent component class.
property
I do not understand how the property 'selectedFilteredRadioButton' became the standard selector of the radio bullet simply by asigning the value of the tag to it.
Can someone please enlighten me?
From Angular documentation:
All inputs controlled by ngModel (including those of type radio) will use the value of their name attribute to determine the property under which their NgModelController will be published on the parent FormController.
Simply put, I think ngModel can recognize what is the element that they are in, and behave accordingly.
how is this couch? where do i find more courses for him ? anybody knows ?
3:17 ngModel is an attribute directive right?
That's right
@procademy why the git is not updated?
Excellent !, where is the video-related code repo ?
Where to find codebase of this video.
Hiii bro, where is this source code of this @Output() decorator....
how to get the exact code that you have used in this video , you have provided the repo link , but the code there is different from what you have used here , if you could guide me it would be helpful. cheers!!!. Great explanation btw
you said that "ngModel" is a Built-in structural directive like ngStyle and ngClass, but actually ngStyle and ngClass are not structural directive ! They are attribute directive
please upload this code in repo.
SIR source code?
Sir, there should be some more clarity
i guess you didn't use the @output
bit confusing this time.became more clear when watched again
Once you will watch it few more times, it will become clear. This concept is a little bit confusing for beginners. I also did not understood this concept in first attempt when i was learning angular :)
@@procademy correct, it is more clear and understandable when watched it again.thanks for great series!!
@@procademyMy filter event is not working.This did not emit event
@@SushilGuptaa mine also not working got any solution?
instead of ngIf you could have created a function like filteredProject and basically filter products from the selectedfilter value
react laughing in the corner...