Signal-based View Queries in Angular 17

Introduction

• New feature in Angular 17: Signal-based view queries
• Previous features explained in Angular 12 video
• Example project: Upgrading from Angular 12 to Angular 17
  • Components: App, Child
  • Directives: App directive
  • Services: Child service

Previous Query Methods in Angular

• Decorators used: @ViewChild, @ViewChildren
• Need to query child components, directives, services, template references, etc.

Signal-based Queries in Angular 17

• New function: viewChild
  • Simplifies querying
  • Returns a signal of type component or undefined
• Console Logs in lifecycle hooks for demonstration
  • ngOnInit
  • ngAfterViewInit

Static Option in Older Angular Versions

• Used to access view query results in ngOnInit
• Static option not needed in signal-based approach
  • Query result available in ngOnInit automatically
  • No static option, only read option is available

Querying Directives

• Querying child directives using viewChild
• Returns a signal of type directive or undefined

Querying Services

• Injecting services within child components
• Using viewChild to query services and tokens
  • Returns signal of type service or token
  • Can specify type for tokens for better type safety

Querying Template References

• Example with ng-template
  • Can still query using viewChild
  • Template reference variables can be queried similarly
  • Example shows querying an ng-template and displaying it in lifecycle hooks

Template Reference Variables

• Common way to access elements in view
• Variables can be queried by their name
  • Returns either component instance or element reference depending on usage

Dynamic Template References

• Multiple elements with same template reference variable
  • Value changes dynamically (e.g., if-else blocks)
• Signal-based approach uses effects for updated values
  • Demonstration with setTimeout

Multiple Instances

• viewChildren function for querying multiple instances
  • Similar to @ViewChildren
  • Returns list of child component instances

Dynamic Queries with Multiple Instances

• Handling dynamic entries (e.g., array of names)
• Use effects for updated query results
  • Demonstration with adding new entries dynamically

Required Mode

• Mark view queries as required
  • Throws error if matching result is not found
  • Example shows handling required and missing elements

Conclusion

• Introduction of signal-based approach simplifies view queries
• Improved management and querying of child elements, directives, and services
• Hopeful for better understanding of new approach