0 votes
in Technology by (1.0m points)
How does one share data between components in Angular?

1 Answer

0 votes
by (1.0m points)

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

image



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.

image



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;
      }
    
  

Learn More with Blogmepost

blogmepost Online Test

NCERT Questions & Answers

  • NCERT Class 12 Maths Solutions
  • NCERT Class 12 Physics Solutions
  • NCERT Class 12 Chemistry Solutions
  • NCERT Class 12 Biology Solutions
  • NCERT Class 10 Science Solutions
  • NCERT Class 10 Maths Solutions
blogmepost Q&A

CBSE Questions & Answers Portal

  • CBSE Class 12 Maths Questions Answers
  • CBSE Class 12 Physics Questions Answers
  • CBSE Class 12 Chemistry Questions Answers
  • CBSE Class 12 Biology Questions Answers
  • CBSE Class 10 Science Questions Answers
  • CBSE Class 10 Maths Questions Answers
Blogmepost

Learn Math Formula, Revise Notes

  • JEE Crash Course Questions & Answers
  • NCERT Course Questions and Answers
  • CBSE Board Questions Bank
  • ICSE Board Questions Bank
  • Free Study Materials
  • Question & Answers Bank for All Classes
  • Text Book Solutions
  • Previous Year Question Paper
  • NCERT Book Solutions

  • NCERT
  • NCERT Solutions
  • NCERT Solutions for Class 12 Maths
  • NCERT Solutions for Class 12 Physics
  • NCERT Solutions for Class 12 Chemistry
  • NCERT Solutions for Class 12 Biology
  • NCERT Solutions for Class 11 Maths
  • NCERT Solutions for Class 11 Physics
  • NCERT Solutions for Class 11 Chemistry
  • NCERT Solutions for Class 11 Biology
  • NCERT Solutions for Class 10 Maths
  • NCERT Solutions for Class 10 Science
  • NCERT Solutions for Class 9 Maths
  • NCERT Solutions for Class 9 Science
  • CBSE Classes

  • CBSE Class 5 Questions
  • CBSE Class 6 Questions
  • CBSE Class 7 Questions
  • CBSE Class 8 Questions
  • CBSE Class 9 Questions
  • CBSE Class 10 Questions
  • CBSE Class 10 Maths Questions
  • CBSE Class 11 Commerce Questions
  • CBSE Class 11 Engineering Questions
  • CBSE Class 11 Medical Questions
  • CBSE Class 12 Commerce Questions
  • CBSE Class 12 Maths Questions
  • CBSE Class 12 Engineering Questions
  • CBSE Class 12 Medical Questions
  • BOARDS

  • CBSE
  • ICSE
  • NCERT
  • IGCSE
  • Andhra Pradesh
  • Bihar
  • Gujarat
  • Jharkhand
  • Karnataka
  • Kerala
  • Madhya Pradesh
  • Maharashtra
  • Punjab
  • Rajasthan
...