Angular Signal Queries with the 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 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

[@romanfedun577]

thanks for the video, very informative and useful

[@aram5642]

What is the advantage of moving the .focus() invocation from ngOnInit to constructor + effect?

[@briantreese]

Great question! The advantage is that the life cycle hooks are not really needed in this scenario now that the viewChild() and contentChild() queries are signals. We really just want to call focus() on the element as soon as it notifies us that it's ready which is exactly what the effect will do.
Also, if we were to switch and make the element optional, we wouldn't need to change anything with the effect. Take a look at this example (stackblitz.com/edit/stackblitz-starters-5xer3s?file=src%2Fsearch%2Fsearch.component.ts,src%2Fsearch%2Fsearch.component.html). I switched it around so that there is a two second delay before the input element is inserted. But, once it's inserted, it still receives focus and I didn't need to switch anything as far as the effect goes.
I hope that helps!

[@aram5642]

@@briantreese altight makes sense. Effects are always run on construction, to sort of get bootstrapped and subscribe to the signals they depend on. The bit that I missed was that they run when they are ready. Thanks for the explanation!