in Technology 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:
 

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

Related questions

0 votes
    What are the Components, Modules and Services in Angular?...
asked Jun 29, 2021 in Technology by JackTerrance
0 votes
    What is the need of Angular 8 components?...
asked Jun 28, 2021 in Technology by JackTerrance
0 votes
    How to share information between different build steps or stages in a Jenkins Job?...
asked Sep 14, 2021 in Technology by JackTerrance
0 votes
    I need to wrap a mat-slide-toggle component on my own, I wrote: mytoggle.component.ts import { ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 17, 2022 in Education by JackTerrance
0 votes
    I'm trying to create an Angular reusable button component. Right now, it is used like so: [label] ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 7, 2022 in Education by JackTerrance
0 votes
    I'm using Node.JS with Express.js and I need to share a variable between modules, I have to do ... , JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Feb 11, 2022 in Education by JackTerrance
0 votes
    Trying to search trough extrnal api Weather servis. Api is tested and works fine. Problem: Enter value in ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 26, 2022 in Education by JackTerrance
0 votes
    Trying to search trough extrnal api Weather servis. Api is tested and works fine. Problem: Enter value in ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 24, 2022 in Education by JackTerrance
0 votes
    How to pass data between react components?...
asked Dec 5, 2020 in Technology by JackTerrance
0 votes
    which term describes a could provider allowing more than one company to share or rent the same server? Select the correct answer from above options...
asked Dec 16, 2021 in Education by JackTerrance
0 votes
    How does an Angular application work?...
asked Jun 29, 2021 in Technology by JackTerrance
0 votes
    They share hardware resources as well as software and data. A. Network. B. Computer network. C. Communication. D. Internet Select the correct answer from above options...
asked Dec 9, 2021 in Education by JackTerrance
0 votes
    They share hardware resources as well as software and data. A. Network. B. Computer network. C. Communication. D. Internet Select the correct answer from above options...
asked Dec 3, 2021 in Education by JackTerrance
0 votes
    I have used angular-cli with systemJS and am now comfortable with its build process,test cases & component ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Jul 3, 2022 in Education by JackTerrance
0 votes
    I'm not sure why the change detection wouldn't work here. I've tried a few things, including a ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Jun 18, 2022 in Education by JackTerrance
...