From the course: Reactivity and Signals in Angular
Unlock this course with a free trial
Join today to access over 24,900 courses taught by industry experts.
Querying template elements as signals - Angular Tutorial
From the course: Reactivity and Signals in Angular
Querying template elements as signals
- [Instructor] Sometimes we need to access template elements in a component. To enable this, Angular provides view queries and content queries. These queries allow us to get references to components, specific DOM elements, directives, and more. To make interacting with queries easier, Angular query functions return a signal that can be used like any other signal in our code. Before Angular introduced query functions, we used decorator-based queries to obtain the required references. The benefit of using function-based queries instead is that decorator-based queries are not reactive. The value of a decorator-based query cannot be accessed until the AfterViewInit or AfterContentInit lifecycle hooks have run. If you've ever struggled with the infamous "expression changed after checked" error, it's almost certainly related to using the value of a decorator-based query in a lifecycle hook that runs after the component has been checked for changes. Since function-based queries always return…