0 votes
in Angular by
How does one share data between components in Angular?

1 Answer

0 votes
by
Following are the commonly used methods by which one can pass data between components in angular:

Parent to child using @Input decorator

Consider the following parent component:

    

      @Component({

        selector: 'app-parent',

        template: `

          <app-child [data]=data></app-child>

        ` ,

        styleUrls: ['./parent.component.css']

      })

      export class ParentComponent{

        data:string = "Message from parent";

        constructor() { }

      }

    

  

In the above parent component, we are passing “data” property to the following child component:

    

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

      @Component({

        selector: 'app-child',

        template:`

          <p>{{data}}</p>

        `,

        styleUrls: ['./child.component.css']

      })

      export class ChildComponent {

        @Input() data:string

        constructor() { }

      }

    

  

In the child component, we are using @Input decorator to capture data coming from a parent component and using it inside the child component’s template.

Child to parent using @ViewChild decorator

Child component:

    

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

      @Component({

        selector: 'app-child',

        template:`

          <p>{{data}}</p>

        `,

        styleUrls: ['./child.component.css']

      })

      export class ChildComponent {

        data:string = "Message from child to parent";

        constructor() { }

      }

    

  

Parent Component

    

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

      import { ChildComponent } from './../child/child.component';

      @Component({

        selector: 'app-parent',

        template: `

          <p>{{dataFromChild}}</p>

        ` ,

        styleUrls: ['./parent.component.css']

      })

      export class ParentComponent implements AfterViewInit {

        dataFromChild: string;

        @ViewChild(ChildComponent,{static:false}) child;

        ngAfterViewInit(){

          this.dataFromChild = this.child.data;

        }

        constructor() { }

      }

    

  

In the above example, a property named “data” is passed from the child component to the parent component.

@ViewChild decorator is used to reference the child component as “child” property.

Using the ngAfterViewInit hook, we assign the child’s data property to the messageFromChild property and use it in the parent component’s template.

Child to parent using @Output and EventEmitter

In this method, we bind a DOM element inside the child component, to an event ( click event for example ) and using this event we emit data that will captured by the parent component:

Child Component:

    

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

      @Component({

        selector: 'app-child',

        template:`

          <button (click)="emitData()">Click to emit data</button>

        `,

        styleUrls: ['./child.component.css']

      })

      export class ChildComponent {

        data:string = "Message from child to parent";

        @Output() dataEvent = new EventEmitter<string>();

        constructor() { }

        emitData(){

          this.dataEvent.emit(this.data);

        }

      }

    

  

As you can see in the child component, we have used @Output property to bind an EventEmitter. This event emitter emits data when the button in the template is clicked.

In the parent component’s template we can capture the emitted data like this:

    

      <app-child (dataEvent)="receiveData($event)"></app-child>

    

  

Then inside the receiveData function we can handle the emitted data:

    

      receiveData($event){

        this.dataFromChild = $event;

      }

Related questions

0 votes
asked Sep 13, 2019 in Angular by ivor2019
0 votes
asked Sep 13, 2019 in Angular by ivor2019
...