Angular Tutorial: ViewChild and ContentChild

Welcome to our comprehensive guide on Angular's powerful features - ViewChild and ContentChild! In this tutorial, we'll explore these properties that help you interact between components and their views or content. Let's dive in!

What are ViewChild and ContentChild?

💡 ViewChild and ContentChild are Angular's built-in properties that allow a parent component to access and manipulate its child component's properties and elements or the child component's content.

Why use ViewChild and ContentChild?

These properties come in handy when you want to access, manipulate, or interact with a child component or its content from the parent component. They are essential when you need to perform actions based on user interactions, pass data, or manage the application's state.

ViewChild

What is ViewChild?

📝 ViewChild is an Angular property decorator used to query and get a reference to a child view or element in the template of the parent component.

How to use ViewChild?

To use ViewChild, first, import it from @angular/core.

typescript

import { Component, ViewChild, ElementRef } from '@angular/core';

Next, define a property with the ViewChild decorator.

typescript

@ViewChild('childComponent', { static: false }) childRef: ElementRef;

Here, childComponent is the ViewContainerRef or ViewChild of the child component that we want to access. The static option, when set to true, tells Angular to create the query only once during the initial compilation. When set to false (as in our example), the query is executed every time Angular checks for changes.

Now you can use the childRef property to interact with the child component or its elements.

Example

Let's create a simple example with a parent and child component.

Parent Component

typescript

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <h2>Parent Component</h2>
    <app-child #childComponent></app-child>
    <button (click)="focus()">Focus Child</button>
  `,
})
export class ParentComponent {
  @ViewChild('childComponent', { static: false }) childRef: ElementRef;

  focus() {
    this.childRef.nativeElement.focus();
  }
}

Child Component

typescript

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <input type="text" [(ngModel)]="inputValue" #inputRef>
  `,
})
export class ChildComponent {
  @Input() inputValue: string;
  @ViewChild('inputRef') inputRef: ElementRef;
}

In this example, we have a parent component with a child component. The parent component has a button that, when clicked, focuses on the input field in the child component using the focus() method.

ContentChild

What is ContentChild?

📝 ContentChild is similar to ViewChild, but it is used to query and get a reference to the projected content of a child component within the view container of the parent component.

How to use ContentChild?

To use ContentChild, first, import it from @angular/core.

typescript

import { Component, ContentChild, ContentChildRef } from '@angular/core';

Next, define a property with the ContentChild decorator.

typescript

@ContentChild(MyComponent) myContent: MyComponent;

Here, MyComponent is the component that we want to access as projected content.

Now you can use the myContent property to interact with the child component.

Example

Let's create an example with a parent and child component.

Parent Component

typescript

import { Component, ViewContainerRef, ContentChild } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <h2>Parent Component</h2>
    <ng-template appMyComponent></ng-template>
    <button (click)="handleContent()">Handle Content</button>
  `,
})
export class ParentComponent {
  @ContentChild(MyComponent) myContent: MyComponent;

  handleContent() {
    console.log(this.myContent.data);
  }
}

Child Component

typescript

import { Directive, Input, TemplateRef, InputTemplateRef } from '@angular/core';
import { ContentChild } from '@angular/core';

@Directive({
  selector: '[appMyComponent]',
})
export class MyComponentDirective {
  @ContentChild(TemplateRef) templateRef: TemplateRef<any>;

  @Input('appMyComponent') data: string;

  constructor(private templateRef: TemplateRef<any>) {}

  ngAfterContentInit() {
    this.templateRef.createEmbeddedView({ data: this.data });
  }
}

In this example, we have a parent component with a custom directive appMyComponent. The parent component has a button that, when clicked, logs the data from the child component when we use handleContent().

Angular Tutorial: ViewChild and ContentChild

Angular Tutorial: ViewChild and ContentChild

What are ViewChild and ContentChild?

Why use ViewChild and ContentChild?

ViewChild

What is ViewChild?

How to use ViewChild?

Example

ContentChild

What is ContentChild?

How to use ContentChild?

Example

Quiz