Скачать или смотреть Signal queries: Angular viewChild() and contentChild() functions

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 and the output function  ).

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!

------------------------------------------------------------------------------

🔗 Demo Links:
Before
-- (https://stackblitz.com/edit/stackblit...)
-- (https://stackblitz.com/edit/stackblit...)
-- (https://stackblitz.com/edit/stackblit...)

After
-- (https://stackblitz.com/edit/stackblit...)
-- (https://stackblitz.com/edit/stackblit...)
-- (https://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 #angulartutorial #signals