Excellent video, as usual 🎉 In the minute 10:50, in the parent component's code, "amount" should be "value", for the example to work, I believe. Thank you for the awesome video.
Thank you so much. And yep, you are right. The component code doesn't correctly match the HTML binding. But it was supposed to be the other way around (so as not to be confused with the 'value' from the child). "value" in the component code was supposed to be "amount". amount = signal(''); length = computed(() => this.amount().length); Bummer that there is no easy way to update a posted video! (I will add it to the video notes.) Thanks again! Deborah
Clear and easy to follow as always ^_^ Since your great at explaining these in detail I feel a video where you show how you can use signals to manipulate populated data in like a grid from and API endpoint might make for an interesting video. Just how the whole setup, kind of pieces all the recent videos together would show how to communicate from parent to child and use signals to manipulate data after it is populated from an endpoint. But regardless I find your videos very informative and great to link to my juniors etc that are learning angular. And are always good review material for myself especially with the newer things like Angulars New Control Flow.
I am a visual learner and your presentation is extremely intuitive. I like it when you show "before" and "after" visually. I assume this approach may not work if I want to write a reactive programming, correct? I am still learning about Angular Signals.
Glad it was helpful! To answer your question, it depends on what you are reacting to. The techniques shown in this video are helpful when the parent component needs to react to changes made in the child component. The user types a filter into the child component textbox and the parent component can react to that change, displaying the length of the filter string or passing the result to another child component.
Hello Deborah Kurata, Thank you so much for your tutorials, they are very effective and impressive. I have a question: if I have a list of products and I want to view the details of a product in a separate component using the routing "/product/1", and I used a signal to get the details of the selected product, but I have a problem: when I refresh the page, I lose the data, which is a normal behavior. Can you help me solve this problem without exposing the observable to the component (meaning I want my signal to be filled from an HTTP call when refreshing the page).
Great video! Applying this solution of signals two way binding here. It is working fine, but my IDE (IntelliJ) is show error in the html on the [(modelVariable)] at the parent. The error is: "Can't bind to [(modelVariable)] since it is not provided by any applicable directives". Do you have any ideas how to fix it?
Thank you. Regarding your IDE, it looks like jetbrains said they fixed it: youtrack.jetbrains.com/issue/WEB-65415/Angular-17.2-model-input-support#:~:text=WEB%2D66429,on%20top%20of%20general%20support: Do you have the latest update of IntelliJ?
Hi Deborah, I used your courses to training new junior devs when they start onboard period, but now yours introductory courses are removed from Pluralsight, where I can found this type of courses made by you?
Thank you for asking! The Pluralsight courses weren't removed, just retired. You can still find them with the links here: app.pluralsight.com/profile/author/deborah-kurata Pluralsight won't allow me to update the "Getting Started" saying that it wasn't needed since they have an "Angular Fundamentals" in their library. I have done a new RxJS course for Pluralsight. I'm considering redoing my "Getting Started" course here on TH-cam, but I haven't finalized a plan as of yet.
5 หลายเดือนก่อน
@@deborah_kurata Thanks @deborah_kurata Considering redoing that on platform that we can buy your course, on Udemy for example.
@ I was never able to get passed their automated verification system and I couldn't find a person to talk to about it. So I can't post to Udemy. Do you think posting the course here on TH-cam would be useful?
Hi Deborah, big fan here. It would be useful for sure, but also make sure you’re getting compensated for the in depth courses. So TH-cam may not pay off. Consider creating your own website to sell your videos. All in all, we just want you to be motivated to keep it up :)
Nice video, very well explained, thanks! I've never liked the two way data binding, for me it seems as an anti pattern that a child component class can modify the parent component class properties. I prefer using an output event and let the parent modify anything that belongs to itself, making it explicit. ..
I understand the sentiment. But 2-way binding is just another tool, if you use it in correct situations, like Form building, it can literally saves you a ton of code. At the end of the day, the outcome is the same, isn't it. The data on parent is being edited, either if you use 2-way binding like Angular, or you pass a callback fn that edit the "parent's data" to the child like the React's way.
@@vutruong4164 In my case it makes a big difference, and that's because I work with a team of front-end developers, some of them with not a very good understanding of programming principles. So this kind of things that don't follow, e.g., SOLID principles, open doors for coding practices that spread like viruses in our projects... Of course, if they become better then, they'll know when to use stuff like this or not, and why, but that takes time...and viruses spread really fast ;-)
Deborah the video is great but just a note here. You are referring to the relation between app-filter and app-snack-list as a parent-child relationship. Hmm... I would say that they are siblings. The parent child relationship is between app-snack and app-filter. the same goes for app-snack and app-snack-list. So the examples here are more about how two-way communication can be helpful between sibling components being under the same parent (umbrella) . My 2 cents
Thank you! You are correct that the parent-child relationship is between app-snack and app-filter. That is the relationship I'm talking about. The techniques I presented only work between the parent (app-snack) and the child (app-filter). The fact that I'm also passing the value onto the other child component is basically irrelevant to the topic. I considered removing the second child component (app-snack-list) from this demo to prevent confusion, maybe even moving that code into the parent component. But I thought that would be confusing for anyone who watched both videos. I apologize for this confusion. Would it help if I did a second stackblitz showing the techniques without the second child?
@@deborah_kurata no worries, I tried and implemented by myself all the example you mentioned in the video just to have a more clear view and I think I got it now . Thank you for your help :) 😊
I think the video should cover how to implement multiple outputs. For example, a todo item with 3 outputs for edit, delete, and change status. Should each one be a separate model() with its corresponding [(thingy)]; or should it be a single "state" object like in React?
Are you asking why I have not updated my "Angular: Getting Started" course on Pluralsight? It's because Pluralsight won't allow it. I'd asked numerous times over the past almost two years and they've said no. Since they have an "Angular Fundamentals" course, they don't think that they also need an "Angular: Getting Started". I'm considering redoing the course for TH-cam (I can't just repost the original course because Pluralsight owns it.)
This used to be possible by adding Change to the output parameter name something like that @Output() childDataChange = new EventEmitter(); and using banana in the box syntax in the component
Yep! (I cover that in the video. 😊) But with model inputs, it's one line of code to create the model input ... no need to create the @Input, @Output and do the emit.
Excellent video, as usual 🎉
In the minute 10:50, in the parent component's code, "amount" should be "value", for the example to work, I believe.
Thank you for the awesome video.
Thank you so much.
And yep, you are right. The component code doesn't correctly match the HTML binding. But it was supposed to be the other way around (so as not to be confused with the 'value' from the child). "value" in the component code was supposed to be "amount".
amount = signal('');
length = computed(() => this.amount().length);
Bummer that there is no easy way to update a posted video! (I will add it to the video notes.)
Thanks again!
Deborah
Clear and easy to follow as always ^_^
Since your great at explaining these in detail I feel a video where you show how you can use signals to manipulate populated data in like a grid from and API endpoint might make for an interesting video. Just how the whole setup, kind of pieces all the recent videos together would show how to communicate from parent to child and use signals to manipulate data after it is populated from an endpoint.
But regardless I find your videos very informative and great to link to my juniors etc that are learning angular. And are always good review material for myself especially with the newer things like Angulars New Control Flow.
Thank you for the kind words and for the suggestion!
I am a visual learner and your presentation is extremely intuitive. I like it when you show "before" and "after" visually. I assume this approach may not work if I want to write a reactive programming, correct? I am still learning about Angular Signals.
Glad it was helpful!
To answer your question, it depends on what you are reacting to. The techniques shown in this video are helpful when the parent component needs to react to changes made in the child component. The user types a filter into the child component textbox and the parent component can react to that change, displaying the length of the filter string or passing the result to another child component.
You're great Deborah!
Thank you so much!
Hello Deborah Kurata,
Thank you so much for your tutorials, they are very effective and impressive. I have a question: if I have a list of products and I want to view the details of a product in a separate component using the routing "/product/1", and I used a signal to get the details of the selected product, but I have a problem: when I refresh the page, I lose the data, which is a normal behavior. Can you help me solve this problem without exposing the observable to the component (meaning I want my signal to be filled from an HTTP call when refreshing the page).
Thank you so much for sharing. I love your approach, simple and effective :)
That is kind of you to say. Thank you!
Picture Perfect 🥰
Thank you!
Amazing! Thanks! :)
Thank you! 😊
great job ❤
Thank you! 😄
Great video! Applying this solution of signals two way binding here. It is working fine, but my IDE (IntelliJ) is show error in the html on the [(modelVariable)] at the parent. The error is: "Can't bind to [(modelVariable)] since it is not provided by any applicable directives". Do you have any ideas how to fix it?
Thank you.
Regarding your IDE, it looks like jetbrains said they fixed it: youtrack.jetbrains.com/issue/WEB-65415/Angular-17.2-model-input-support#:~:text=WEB%2D66429,on%20top%20of%20general%20support:
Do you have the latest update of IntelliJ?
I'll update it! Thanks a lot
Hi Deborah, I used your courses to training new junior devs when they start onboard period, but now yours introductory courses are removed from Pluralsight, where I can found this type of courses made by you?
Thank you for asking!
The Pluralsight courses weren't removed, just retired. You can still find them with the links here: app.pluralsight.com/profile/author/deborah-kurata
Pluralsight won't allow me to update the "Getting Started" saying that it wasn't needed since they have an "Angular Fundamentals" in their library. I have done a new RxJS course for Pluralsight.
I'm considering redoing my "Getting Started" course here on TH-cam, but I haven't finalized a plan as of yet.
@@deborah_kurata Thanks @deborah_kurata Considering redoing that on platform that we can buy your course, on Udemy for example.
@ I was never able to get passed their automated verification system and I couldn't find a person to talk to about it. So I can't post to Udemy.
Do you think posting the course here on TH-cam would be useful?
Hi Deborah, big fan here. It would be useful for sure, but also make sure you’re getting compensated for the in depth courses. So TH-cam may not pay off. Consider creating your own website to sell your videos. All in all, we just want you to be motivated to keep it up :)
@@deborah_kurata posting the course here on TH-cam would be useful!
in the last slide amount should be signal like you made lastFilter as signal...please make ur silde correct or make me correct
I love Angular and his new vision!
Me too! Thanks!
Nice video, very well explained, thanks!
I've never liked the two way data binding, for me it seems as an anti pattern that a child component class can modify the parent component class properties. I prefer using an output event and let the parent modify anything that belongs to itself, making it explicit. ..
I understand the sentiment. But 2-way binding is just another tool, if you use it in correct situations, like Form building, it can literally saves you a ton of code.
At the end of the day, the outcome is the same, isn't it. The data on parent is being edited, either if you use 2-way binding like Angular, or you pass a callback fn that edit the "parent's data" to the child like the React's way.
@@vutruong4164 In my case it makes a big difference, and that's because I work with a team of front-end developers, some of them with not a very good understanding of programming principles. So this kind of things that don't follow, e.g., SOLID principles, open doors for coding practices that spread like viruses in our projects... Of course, if they become better then, they'll know when to use stuff like this or not, and why, but that takes time...and viruses spread really fast ;-)
Deborah the video is great but just a note here.
You are referring to the relation between app-filter and app-snack-list as a parent-child relationship. Hmm... I would say that they are siblings.
The parent child relationship is between app-snack and app-filter. the same goes for app-snack and app-snack-list.
So the examples here are more about how two-way communication can be helpful between sibling components being under the same parent (umbrella) . My 2 cents
Thank you!
You are correct that the parent-child relationship is between app-snack and app-filter. That is the relationship I'm talking about. The techniques I presented only work between the parent (app-snack) and the child (app-filter).
The fact that I'm also passing the value onto the other child component is basically irrelevant to the topic. I considered removing the second child component (app-snack-list) from this demo to prevent confusion, maybe even moving that code into the parent component. But I thought that would be confusing for anyone who watched both videos.
I apologize for this confusion. Would it help if I did a second stackblitz showing the techniques without the second child?
@@deborah_kurata no worries, I tried and implemented by myself all the example you mentioned in the video just to have a more clear view and I think I got it now . Thank you for your help :) 😊
Game changes.
I think the video should cover how to implement multiple outputs. For example, a todo item with 3 outputs for edit, delete, and change status. Should each one be a separate model() with its corresponding [(thingy)]; or should it be a single "state" object like in React?
didn't know that writing the 2way binding in long form is to add ...Change to the event binding name. thanks for the video, very informative.
Glad it helped!
Deb ♥rah!!
😊
When do you drop the update getting Started With Angular ?
Are you asking why I have not updated my "Angular: Getting Started" course on Pluralsight? It's because Pluralsight won't allow it.
I'd asked numerous times over the past almost two years and they've said no. Since they have an "Angular Fundamentals" course, they don't think that they also need an "Angular: Getting Started".
I'm considering redoing the course for TH-cam (I can't just repost the original course because Pluralsight owns it.)
@@deborah_kurata That is sad. I hope you will work things out.
Great
Thanks!
This used to be possible by adding Change to the output parameter name something like that @Output() childDataChange = new EventEmitter(); and using banana in the box syntax in the component
Yep! (I cover that in the video. 😊) But with model inputs, it's one line of code to create the model input ... no need to create the @Input, @Output and do the emit.
Great video Deborah. Clear and easy to understand.
Thank you so much! 😊
Great video, beautiful pedagogy.
Thx from France. 🙏🏻
Thank you! 😊
Thank you so much for another fantastic video, Deborah
Thanks! 😊
How to do this in reactive form input?
My understanding is that the Angular team is still working on signal-based forms. So hopefully some time soon?
Thank you very much Deborah :)
😊
Thank you for the video!
😊
Very nice thank u!
😊
Great 🎉
Thanks! 😊
Love you!
😊