Angular v17.2 Updates — viewChild()

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