DEV Community

Nhan Nguyen
Nhan Nguyen

Posted on

3

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:

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up