View Child decorators in Angular

In this post we will review the View Child and View Children decorators in Angular.

View Child decorator

Defining View Child references

This decorator will allows us to query elements from the view at the component level, let’s see an example.

Consider a given CustomComponent in your view that is exported as CustomComponent in its model:

<custom-component [title]="data.title"></custom-component>

You can access it from the model of the view:

@ViewChild(CustomComponent)
myComponentRef: CustomComponent;

In the case where two components of the same type are defined in the view, it will always query only the first one that it has found.

You can also query by a template reference:

<custom-component #myReference [title]="data.title"></custom-component>

@ViewChild('myReference')
myComponentRef: CustomComponent;

You can also use this pattern with plain HTML elements instead of components:

<div class="myclass" #myPlainReference>
  Some text
</div>

Then on the component:

@ViewChild('myPlainReference')
myPlainElement: ElementRef;

ElementRef is a special type from Angular Core that allows us to refer to plain native DOM elements.

Taking this into account, we could access the plain native DOM elements of our CustomComponent passing the read option with the ElementRef argument:

@ViewChild('myReference', {read: ElementRef})
myComponentRef: CustomComponent;

This will give us a reference to the plain native DOM elements of the component, and not the component itself.

Earliest point in runtime to access references

If you try to access a View Child reference in the constructor, you will find that there is no value assigned when accessing from it. That’s because the constructor is too early in runtime to access the reference, as it’s not yet assigned.

For that, we need to implement AfterViewInit in our component:

export class MyComponent implements AfterViewInit {

  @ViewChild('myReference', {read: ElementRef})
  myComponentRef: CustomComponent;

  constructor() {}

  ngAfterViewInit () {
    console.log(this.myComponentRef);
  }
}

The ngAfterViewInit is not meant to be called in code, it will automatically called when all ViewChild references are populated. This special function is called a Lifecycle Hook.

ngAfterViewInit is the perfect place to put initialization code that our ViewChild might need.

It is also important to NOT modify any data from our ViewChild inside ngAfterViewInit as it will trigger an error. Don’t do this:

ngAfterViewInit () {
  this.myComponentRef.myValue = 'A new value';
}

View Children decorator

It serves a similar purpose as View Child decorator, but allows us to get a reference to multiple elements instead of just one. We need to pass it the type of the component and define a reference variable:

ViewChildren(CustomComponent)
myComponentsRef;

ngAfterViewInit () {
  console.log(this.myComponentsRef);
}

The result is that we will not get an array in myComponentsRef but a variable of type QueryList. So we can define it like this:

ViewChildren(CustomComponent)
myComponentsRef: QueryList<CustomComponent>;

Then if we manipulate the myComponentsRef variable, we can see that there are a lot of functions that are included with a plain JavaScript array.

ngAfterViewInit () {
  console.log(this.myComponentsRef.first);
  console.log(this.myComponentsRef.last);
  console.log(this.myComponentsRef.length);
  // And so on...
}

But we also have access to a special attribute called changes. This is also called an Observable, and by using the subscribe function we can retrieve different values that will be emitted when it changes its value.

ngAfterViewInit () {
  this.myComponentsRef.changes.subscribe(
    cards => console.log(cards)
  );
}

Then we will get data printed out in the console if a new value is added to myComponentsRef, for example, a new component of type CustomComponent is added during runtime.

Also, we can access the plain DOM elements for our Children, similar to ViewChild:

ViewChildren(CustomComponent, {read: ElementRef})
myComponentsRef: QueryList<ElementRef>;

Also important is to note that with ViewChild nor ViewChilden we can’t access components inside these components (ie, can’t access components inside CustomComponent).