Lesson Outline

Understanding @ViewChild and @ContentChild

In a previous lesson, we discussed how to use ElementRef to grab a reference to a native DOM element, and how to use Renderer to make changes to that element.

In that lesson, we injected ElementRef into the constructor as element which allowed us to gain access to the host element of the component through this.element.nativeElement. We won't always want to access the host element, so what do we do if we want to grab a reference to some other element on the page? With standard Javascript, you might do something like this:

document.getElementById('some-id');

But that's not really the "Angular way" to do it. As we covered in the last lesson, Angular is supposed to abstract direct DOM access away so that we aren't relying on a browser specific implementation, but by using a method like document.getElementById we are circumventing that concept and directly accessing the DOM.

Just like we needed to use Renderer in order to make platform agnostic changes whilst using ElementRef, we also need a platform agnostic way to access various elements on the page.

In order to do that, we will need to get familiar with the following annotations:

• @ViewChild
• @ViewChildren
• @ContentChild
• @ContentChildren

We can use these to grab references to elements on the page. We will begin this lesson by discussing different methods we can use to grab a reference to an element on the page, and then we will discuss the difference between @ViewChild and @ContentChild.

Using a Component

We could grab a reference to a particular component using @ViewChild like this:

@ViewChild(MyComponent) myReference: MyComponent;

We supply the component to @ViewChild so it knows what to grab from the template, we give the variable we are creating a name of myReference, and we also give it a type of MyComponent (since that is what is being grabbed). Since we supply MyComponent to @ViewChild() it will grab the first instance of MyComponent in the template. If we had the following code in the template for the component we had added the @ViewChild to:

<my-component></my-component>

It would return a reference to that MyComponent component. This is a reference to the entire component, not the ElementRef specifically. You may want to grab a reference to the component itself with @ViewChild in some cases, but if you do want to access the native DOM element, you would need to define the @ViewChild as follows: