How to pass Array of Objects from Child Component to Parent Component in angular

Question

I created two components and named it as parent and child. And I linked these components at app.component.html. Now I have an array of objects in child component, My goal is to show those array of objects in parent component by using @Output. My Expected output is Each object should be in a separate div.

If I am not clear with my doubt please put a comment.

This is app.component.html

<div class="container">
  <div class="row">
    <div class="col-6">
      <app-parent></app-parent>
    </div>
    <div class="col-6">
      <app-child></app-child>
    </div>
  </div>
</div>

This is app.component.css

There is no css in this

This is childcomponent.html

<div class="childclass">
    <h1>This is Child</h1>
</div>

This is childcomponent.css

.childclass {
    background-color: burlywood;
}

This is childcomponent.ts

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})


export class ChildComponent implements OnInit {
  employs = [
    {
      name: `Mark`,
      age: 27,
      jobProfile: 'React Developer'
    },
    {
      name: 'Williams',
      age: 29,
      jobProfile: 'Angular Developer'
    },
    {
      name: 'Tom',
      age: 32,
      jobProfile: 'Vuejs Developer'
    }
  ]

  @Output()
  outputFromChild: EventEmitter<any> = new EventEmitter<any>()
  constructor() { }

  ngOnInit() {
  }

}

This is parentcomponent.html

<div class='parentclass'>
    <h1>This is Parent</h1>
</div>

This is parentcomponent.css

.parentclass {
    background-color: aqua;
}

This parentcomponent.ts

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

`outputFromChild.emit(employs)`? but you need modify parent html tag — Prashant Pimpale, Nov 08 '19 at 05:57
and if possible then provide stackblitz demo so we/I can understand properly — Prashant Pimpale, Nov 08 '19 at 05:58
Possible duplicate of [Pass data from child to parent component Angular2](https://stackoverflow.com/questions/42107167/pass-data-from-child-to-parent-component-angular2) — Prashant Pimpale, Nov 08 '19 at 06:00

score 1 · Answer 1 · answered Nov 08 '19 at 06:08

Make use of EventEmittersuch that you should be able to communicate from child to parent.

app.component.html

<div class="container">
  <div class="row">
    <div class="col-6">
      <app-parent [employees]="employeesFromChild"></app-parent>
    </div>
    <div class="col-6">
      <app-child (ouputFromChild)="getEmployees($event)"></app-child>
    </div>
  </div>
</div>

app.component.ts

employeesFromChild: any;
getEmployees(event){
  this.employeesFromChild = event; //here you will get the employees from child
}

parent.component.ts

@Input() employees: any;

ngOnInit(){
  console.log(this.employees);
}

child.component.ts

 employs = [
    {
      name: `Mark`,
      age: 27,
      jobProfile: 'React Developer'
    },
    {
      name: 'Williams',
      age: 29,
      jobProfile: 'Angular Developer'
    },
    {
      name: 'Tom',
      age: 32,
      jobProfile: 'Vuejs Developer'
    }
  ]

 @Output()
  outputFromChild: EventEmitter<any> = new EventEmitter<any>()

 ngOnInit() {
     this.ouputFromChild.emit(employs);
  }

score 0 · Answer 2 · answered Nov 08 '19 at 07:01

My goal is to show those array of objects in parent component by using @Output

Its' better to use a service along with @Output because parent component and child component are siblings to each other.

Service.ts

export class ServiceName {
    private employeeData= new BehaviorSubject<any>();

    getEvent(): Observable<any> {
        return this.employeeData.asObservable();
    }

    setEvent(param: any): void {
        this.employeeData.next(param);
    }
  }

There are few steps you need to follow to complete your requirement,

Store the data in Service employeeData object, once this done call the Parent class (here it is AppComponent) with help of EventEmitter.
Set up an input field from App Component to Parent Component(which are parent and child in your case).
Once the Input field gets updated then call Service employeeData object to retrive data in Parent Component.

Have a look here to know more about data sharing between sibling components in Angular

Hope this helps you.. :)

How to pass Array of Objects from Child Component to Parent Component in angular

2 Answers2