How to Share Data between Angular Components ? its a common question asked by angular developers…

Data sharing is an essential concept to understand before diving into your first Angular project. In this tutorial, we will show you the most used methods for sharing data between Angular components. Of course , if we talk about component , we will talk about a child component and a parent component.

Parent to Child : Sharing Data via Input

By using the @Input decorator , we can allow data to be shared via the template. it the most common method . in the following example we will create a parent component and a child component. We will start by sharing data from parent to child.

// parent.component.ts

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

@Component({
  selector: 'app-parent',
  template: `
    <app-child [childMessage]="parentMessage"></app-child>
  `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent{
  parentMessage = "message from parent"
  constructor() { }
}
// child component 

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

@Component({
  selector: 'app-child',
  template: `
      Say {{ message }}
  `,
  styleUrls: ['./child.component.css']
})
export class ChildComponent {

  @Input() childMessage: string;

  constructor() { }

}

In the child component template , we will show the message sended by the parent component. Lets Share Data between Angular Components 😉

Child to Parent

Sharing Data via ViewChild

ViewChild allows a one component to be injected into another by giving the parent access to its attributes and functions. The child won’t be available until after the view has been initialized. In this case we need to implement the AfterViewInit lifecycle hook to receive the data from the child.

// parent.component.ts

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from "../child/child.component";

@Component({
  selector: 'app-parent',
  template: `
    Message: {{ message }}
    <app-child></app-child>
  `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements AfterViewInit {

  @ViewChild(ChildComponent) child;

  constructor() { }

  message:string;

  ngAfterViewInit() {
    this.message = this.child.message
  }
}
// child.component.ts

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

@Component({
  selector: 'app-child',
  template: `
  `,
  styleUrls: ['./child.component.css']
})
export class ChildComponent {

  message = 'Hola Mundo!';

  constructor() { }

}

Sharing Data via Output() and EventEmitter

Another way to share data is to emit data from the child, which can be listened to by the parent. In the parent, we will create a function to receive the message and set it equal to the message variable.

In the child, we declare a messageEvent variable with the @Output decorator and set it equal to a new event emitter. Then we have to create a function named sendMessage that calls emit on this event with the message we want to send.

The parent will subscribe to this messageEvent that’s outputted by the child component, then run the receive message function whenever this event occurs.

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

@Component({
  selector: 'app-parent',
  template: `
    Message: {{message}}
    <app-child (messageEvent)="receiveMessage($event)"></app-child>
  `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {

  constructor() { }

  message:string;

  receiveMessage($event) {
    this.message = $event
  }
}
// child component 

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

@Component({
  selector: 'app-child',
  template: `
      <button (click)="sendMessage()">Send Message</button>
  `,
  styleUrls: ['./child.component.css']
})
export class ChildComponent {

  message: string = "Hola Mundo!"

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

  constructor() { }

  sendMessage() {
    this.messageEvent.emit(this.message)
  }
}

Laisser un commentaire