If you work in Angular and haven’t heard yet, many things are in the process of switching away from decorators over to signals. I’ve already shown you how component or directive inputs have changed over from the @Input decorator to signals with the input() function ( • Signal-Based Inputs an... ).
In this video we’ll take a look at how we can convert the @ViewChild and @ContentChild decorators over to signals with the viewChild() and contentChild() functions. We’ll take an example application that I previously created for a video demonstrating how to use the @ViewChild and @ContentChild decorators, and we’ll switch them over to the new signal functions producing the same end result. Ok, let’s get to it!
------------------------------------------------------------------------------
💖 Help Support the Channel:
If you found this helpful and want to show some love, you can always buy me a coffee (buymeacoffee.com/briantreese)!
------------------------------------------------------------------------------
🔗 Demo Links:
- Before
-- (stackblitz.com/edit/stackblit...)
-- (stackblitz.com/edit/stackblit...)
-- (stackblitz.com/edit/stackblit...)
- After
-- (stackblitz.com/edit/stackblit...)
-- (stackblitz.com/edit/stackblit...)
-- (stackblitz.com/edit/stackblit...)
------------------------------------------------------------------------------
📖 Chapters:
0:00 - Introduction
0:49 - The demo application
1:40 - Using the viewChild() function to query for an HTML element within a component view
4:29 - Using an effect() instead of ngOnInit() with viewChild()
5:16 - Making a viewChild() query required
5:57 - Using the viewChild() function to query for a component/directive within a component view
8:04 - Using the contentChild() function to query for a component/directive within projected content
10:18 - Conclusion
------------------------------------------------------------------------------
#angular #angular_developer #angulartraining #javascript #typescript #frontend #angularcourse #angular_components #angular_directives #angular_view_child #angular_content_child #angular_signals #signals
6 авг 2024
