Angular 5 parent child data sharing

0
votes

I'm working on angular 5. I have one array of objects on parent component which I need to show in child component, If any value gets changed in that array of object, I want parent component's value should also be updated. Now My question is, Angular provides 3 ways for component intrection.

  1. @Input @output decorators
  2. @viewchild decorator
  3. Using Services

Which One is more Efficient? Which is best approach In my case? or In general parent child data sharing?

4
angular
I would suggest to use @input decorator to pass the array the child component, because it is the easiest one for your scenario – dreamweiver
you should use @Input with Two-way binding ( [(...)] ) – alessandro
@Alessandro How is it more effient anong these three? – Ushma Joshi
Your child component will expose an @Input property that your parent component will bind in two way fashion style, It's like to have an input property and a property change event on the child component, I suggest you to take a look to angular.io/guide/template-syntax – alessandro

4 Answers

4
votes

  1. One component (<comp1>) is used inside the template of another component (<comp2>). Use @Input @Output

    • as both components will be in a parent-child relationship
    • simple and best to exchange data to/from the child component

  2. Two different components (<comp1>, <comp2>) are used inside a third component's temperate (<comp3>). Use service (only for small apps, not recommended for large apps)

    • both components (comp1, comp2) are not directly related
    • as two components are not in parent-child relation, @Input @Output wont work here
    • Alternatively, you can also use ngrx/store library for large apps (state management)

  3. I use @ViewChild to mainly observe for changes in a DOM element and perform my stuff based on that.

2
votes

Use service approach for updated data handles, following is code

create a data-sharing.service.ts file

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataSharingService {

  private dataSource  = new BehaviorSubject<any>('null');
  currentData = this.dataSource.asObservable();


  private activeStateData  = new BehaviorSubject<any>('null');
  currentActive = this.activeStateData.asObservable();
  constructor() { }

  changeData(data:any){
    this.dataSource.next(data);
  }

  aciveState(state:string){
    this.activeStateData.next(state);
  }    
}

from parent component

constructor( private alertService: AlertService)
  add() {
    let yourSharingData = null;
    this.dataService.changeData(yourSharingData );
    this.router.navigate(["/path-to-your-child"]);
  }

from child component subscribe the service

this.dataService.currentData.subscribe(res => {
console.log(res);
})
0
votes

Let me demonstrate them..

  • @Input() and @Output() used usually to pass specific variables between parent and child components.

    Where @Input() used to pass variable from parent to child and @Output() used to pass from variable from child to parent.

  • @ViewChild() used to get control for child component inside parent component.

    When you use it; you can catch the child component as an Object, so you can call its functions, edit its variables and so on.

  • Services (if you use it to pass variables) will be like a global variable that any component use this service can see it, not just between parent and child components.

    From my point of view; you should not use services to pass data from parent to child or vice versa; cause you'll face a lot of issues if you use multiple child component of use a child component twice.

0
votes

If you asked about efficiency considering the performance with large data sets, then it is better to choose service than "@output" because it internally uses EventEmitters which are costly on performance and same goes with the change detection as well. I hope this answers your question.