Share Component Data With Other Components in Angular

To exchange component data, use Angular’s Input, Output, EventEmitter, and ViewChild.

This page applies to all Angular versions, even the most recent.

You may use the following to communicate component data:

• @Input — binding to a property
• Event binding using @Output and EventEmitter
• AfterViewInit and @ViewChild

Let’s take a look at them one by one.

Property Binding using @Input
You must utilize two things to send data from the parent component to the child component: @Input and property binding.

In this example, we set a string variable named childExample in the child component. We added the @Input decorator from Angular to the variable.

import { Component, Input } from 'aangular/core'; 
@Component({
      selector: 'app-child', 
      template: ` 
            Example: {{ childExample }}
           ' 
})
export class ChildComponent {
      @Input() childExample: string;
}

This allows us to add an attribute to the child’s selector (app-child>), as seen in the example below:

import { Component} from 'aangular/core';
Component({
        selector: 'app-parent',
        template:<app - child[childExample] = "parentExample" > < /app-child>
    }) 
export class Parent Component {
        parentExample: string = 'Hello Angular 7';
}

We declare a variable called parentExample in the parent. We assign it the value [childExample]. Consequently, the word “Hello Angular 7” appears in the child component.

Event Binding using @Output and EventEmitter
It’s the opposite way around with @Output and EventEmitter. Data can be sent back from the child component to the parent component. We define a variable in the child once more, but this time we use the @Output decorator and a new EventEmitter:

@output() exampleOutput = new Event Emitter<string>();

By performing the following, we wish to send an event to the parent component:

exampleMethodChild() {
    this.exampleOutput.emit(this.exampleChild);
}

We feed the text “Hello Angular 12” to a parent component with each button click in the child component.

import { Component, Output, EventEmitter } from 'aangular/core'; 

@Component({
  selector: 'app-child',
  template: <button (click)="exampleMethodChild()">Example output</button>
)}

export class ChildComponent {
 @Output() exampleOutput = new Event Emitter<string>();

 exampleChild: string = 'Hello Angular 12'; 
 exampleMethodChild() {
    this.exampleOutput.emit(this.exampleChild);
 }
}

We can now add an event to the child selector (app-child> in our parent component. As you can see, we utilize the child’s example output, which contains as a value a method named exampleMethodParent with the parameter $event.

import { Component } from 'aangular/core';

@Component({
  selector: 'app-parent', template:
  Example: {{ exampleParent }} <app-child (exampleOutput)="exampleMethodParent($event)"> </app-child>
)}
export class Parent Component {
  exampleParent: string;

  exampleMethodParent($event) {
     this.exampleParent = $event;\\
  }
}

Now, we get a text through an event in our parent method for every button click in the child. In this method, we demonstrate the value of $event. We can now view our child’s example text thanks to interpolation ( exampleParent ).

AfterViewInit and @ViewChild
The third method is to use @ViewChild and AfterViewInit to send data. This third option allows us to refer to a child component and access its variables from within our parent component.

import { Component} from 'aangular/core'; 

@Component({
   selector: 'app-child', 
   template: **
})

export class ChildComponent {
   exampleChild: string = 'Hello Angular 12';
}

The parent component specifies the decorator. In the class, we declare the following:

@ViewChild(ChildComponent) childReference;

Because the child is not available until the view is initialized, we must additionally implement the AfterViewInit lifecycle hook. We obtain the exampleChild from the ChildComponent and assign it to the exampleParent variable in the ngAfterViewInit() function.

ngAfterViewInit() {
   this.exampleParent - this.childReference.exampleChild;
}

Our whole ParentComponent will look something like this:

import { Component, ViewChild, AfterViewInit } from 'aangular/core'; import { ChildComponent } from './child.component';
@Component({
    selector: 'app-parent', 
    template: 
        `
         Example: {{ exampleParent }} <app-child></app-child>
        `
})
export class ParentComponent implements AfterViewInit {
      ViewChild(ChildComponent) childReference:
      exampleParent: string;
ngAfterViewInit() {
this.exampleParent = this.childReference.exampleChild;
}
}

Again, we can view our child’s example text using interpolation ( exampleParent ).