Geek Answers Handbook

How to exchange data between child components in angular?

I have an Angular application with three related components, they can access and update the data variable. They are connected to the router, but the data that I want to transfer is sensitive (api endpoints for determining discounts), so I can not use cmp2 /: data p>

Component 1 has an object called data, and components 2 and 3 must receive this data object. I think this can be done using a common service, but I'm not quite sure how to make this event emitter work.

My index.html:

<router-outlet></router-outlet>

Component 1:

 <button [routerLink]=['cmp2/']>Go to Comp 2 </button> <button [routerLink]=['cmp3/']>Go to Comp 3 </button>

Components 2 and 3:

 {{ data }}
+7
source share
3 answers

It looks like you want to redirect to these components, what you can do is to have an event source on the first component, which when clicked will send data to the parent (out of 3). Then in the parent object you intercept emit and assign it to the data that you pass to other components.

Component1

 import { Component, EventEmitter, Output } from '@angular/core'; import { Router } from '@angular/router'; @Component(...) export class Component1 { @Output() redirect:EventEmitter<any> = new EventEmitter(); data:any = {text: "example"}; constructor(private router:Router){} changeComponent(url:string){ this.redirect.emit(data);//emits the data to the parent this.router.navigate([url]);//redirects url to new component } }

Component2 and Component3

 import { Component, Input } from '@angular/core'; @Component(...) export class Component2 { @Input() data:any; }

parent

 import { Component } from '@angular/core'; @Component(...) export class Parent { parentData:any; }

Parent.html

 <component1 (redirect)="parentData=$event"></component1> <component2 [data]="parentData"></component2> <component3 [data]="parentData"></component3>

Another option, if you do not have a parent, is to have a service that you deploy to each parent, and then to intercept the recipients into the OnInit lifecycle interceptor. This works because services are single if they belong to a common module provider.

service

 import { Injectable } from '@angular/core'; @Injectable() export class SharingService{ private data:any = undefined; setData(data:any){ this.data = data; } getData():any{ return this.data; } }

Component1

 import { Component } from '@angular/core'; import { Router } from '@angular/router'; import { SharingService } form './sharing.service'; @Component(...) export class Component1 { data:any = {text: "example"}; constructor(private router:Router, private sharingService:SharingService){} changeComponent(url:string){ this.sharingService.setData(this.data); this.router.navigate([url]);//redirects url to new component } }

Component2 and Component3

 import { Component, OnInit } from '@angular/core'; import { SharingService } form './sharing.service'; @Component(...) export class Component2 implements OnInit{ data:any; constructor(private router:Router, private sharingService:SharingService){} ngOnInit(){ this.data = this.sharingService.getData(); } }

Make sure you add it to the array of module providers.

module

 import { SharingService } from './sharing.service'; ... @NgModule({ ... providers: [ SharingService ] })
+11
source

Since you have multiple receivers of components , the best way is to use a singleton shared service . Since later, if you create more components receiver, emitting each individual component not suitable.

If you need:

Simple explanation of Output and EventEmitter

https://angular.io/docs/ts/latest/api/core/index/EventEmitter-class.html

+1
source

Angular has the ability to exchange data between siblings through $emit, $broadcast and $on in the angular s $scope and $rootScope .

 <div> <div ng-controller="SiblingOneCtrl1 as sib1" class="ng-scope"> // SiblingOneCtrl </div> <div ng-controller="SiblingTwoCtrl2 as sib2" class="ng-scope"> // SiblingTwoCtrl </div> </div> 
 app.controller('SiblingOneCtrl1', function SiblingOneCtrl1 ($rootScope) { $rootScope.$on('rootScope:emit', function (event, data) { console.log(data); // 'Emit!' }); $scope.$on('rootScope:broadcast', function (event, data) { console.log(data); // 'Broadcast!' }); $rootScope.$on('rootScope:broadcast', function (event, data) { console.log(data); // 'Broadcast!' }); }); app.controller('SiblingOneCtrl2', function SiblingOneCtrl2($rootScope) { $rootScope.$emit('rootScope:emit', 'Emit!'); // $rootScope.$on $rootScope.$broadcast('rootScope:broadcast', 'Broadcast'); // $rootScope.$on && $scope.$on });

also you can follow this and this

+1
source

More articles:


All Articles