how to pass response (array ) from one component to another in angular?

Question

home.component.html

result.componet.ts

import { Component, OnInit ,Input} from '@angular/core';
import {ReplayService} from '../replay.service';


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

})

export class ResultComponent implements OnInit {

show:boolean=true;
  @Input() public resultData;



  constructor(private replayService: ReplayService) { }

  ngOnInit() {
    console.log(this.resultData);

    if(this.resultData!==null  ){
      console.log("result"+this.resultData);
    this.show=false;
    }      
  }
}

result.component.html

<div *ngIf="show"> 

  <h4 align="center" style="color: blue" > Replay  Result </h4>

    <table class="table table-bordered"  >

  </table>

  </div>

Answer 1

When you are passing the Data from Parent to Child Component using Attribute Binding. In Child Component, those values will be received in ngOnChanges() life cycle method.

import { Component, OnInit ,Input} from '@angular/core';
import {ReplayService} from '../replay.service';

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

})

export class ResultComponent implements OnInit, OnChanges {

show:boolean=true;
  @Input() public resultData;

  constructor(private replayService: ReplayService) { }

  ngOnInit() {

  }

  ngOnChanges(){
    console.log(this.resultData);

    if(this.resultData!==null  ){
      console.log("result"+this.resultData);
      this.show=false;
    } 
  }
}

Answer 2

There are many methods for sharing data from parent to child but the most straightforward is using Input decorator. It works by using the @Input() decorator to allow data to be passed via the template.

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.ts

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

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

  @Input() childMessage: string;

  constructor() { }

}

Also, if you want to share data from child to parent then you have to use ViewChild .

Using ViewChild, we can inject a component into another component and because of that, we get access to a component's attributes and functions. One thing to note is that the child component won't be available until the view has been initialized. So 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 = 'Im from child!';

  constructor() { }

}