DEV Community

Nhan Nguyen
Nhan Nguyen

Posted on

Angular v17.2 Updates - viewChild()

Image description

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);
}


Enter fullscreen mode Exit fullscreen mode

The new syntax gives us the same feature as a Signal:



export class App {
  listComponent = viewChild.required<ListComponent>('list');
  ...
  console.log(this.listComponent.items);
}


Enter fullscreen mode Exit fullscreen mode

👉 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:

Top comments (0)