ViewChild is a way to get a reference on an HTML within the current component’s template.
For instance, if we need our Typescript to access the instance of a given child component, We can use @ViewChild like this:
export class App {
@ViewChild('list') listComponent!: ListComponent;
...
console.log(this.listComponent.items);
}
The new syntax gives us the same feature as a Signal:
export class App {
listComponent = viewChild.required<ListComponent>('list');
...
console.log(this.listComponent.items);
}
👉 Differences between these new functions and the old decorators:
These new functions bring a few extra exciting features.
➖ We can eliminate possibly undefined values by making a query required.
➖ Decorator-based queries were satisfied once the component was fully initialized, meaning running side effects required specific lifecycle methods.
➖ With signal-based queries, we receive a signal to rely on computed() or effect() to run such side-effects.
An example is here: Angular viewChild() Demo
I hope you found it useful. Thanks for reading. 🙏
Let's get connected! You can find me on:
- Medium: https://medium.com/@nhannguyendevjs/
- Dev: https://dev.to/nhannguyendevjs/
- Hashnode: https://nhannguyen.hashnode.dev/
- Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
- X (formerly Twitter): https://twitter.com/nhannguyendevjs/
- Buy Me a Coffee: https://www.buymeacoffee.com/nhannguyendevjs
Top comments (0)