Angular 2 , generate results table when parent component makes rest call

Question

I want to

• Run a REST query in my parent component (getTest())
• Upon running the above query I want it to populate results: test[] with the results
• Once results: test[] has been populated I want it to be passed down to the child class so that it can be used to generate a HTML table so that the rows of the table represent the results.

My problem is that the ngOnChanges() method in the child class never gets called so Im not sure how to get the results from the parent when they become available.

Here is my parent and child component .ts file

export class BlotterComponent implements OnInit, OnChanges {
showAdvancedForm: boolean;
results: test[];

constructor(private blotterPostService: BlotterPostService) {
    this.showAdvancedForm = false;
}

ngOnInit() {}

ngOnChanges(changes: any) {
    console.log("ngOnChanges BlotterComponent");
    console.log(this.results);
}

getTest() {
    console.log("Running test RESTful query..");
    this.blotterTradesPostService.getTestQuery().subscribe(u => {
        this.results = u;
        console.log(this.results);
    });
    }
}

Here is my child component .ts file.

export class TestTableComponent implements OnInit, OnChanges {
  @Input() testResults: test[];

  constructor() { }

  ngOnInit() {}

  ngOnChanges() {
      console.log("ngOnChanges TestTableComponent search results");
      console.log(this.testResults);
  }

}

Answer 1

You can create a service and use Event Emitter to emit the changes and than subscribe to those changes in child component for that you have to

1:-Create a service

import { Injectable, Inject,EventEmitter } from '@angular/core';
@Injectable()
export class EmitterService {
public testEmitter:EventEmitter<test[]>=new EventEmitter(); 
}

2.in your root component inject service depandany in counstructor and emit once result comes

  constructor(private emitter :EmitterService) //inject service

 this.blotterTradesPostService.getTestQuery().subscribe(u => {
    this.emitter.testEmitter.emit(u);
    console.log(this.results);
});

3.In your child component constructor

  constructor(private emitter :EmitterService){
    this.emitter.testEmitter.subscribe(results =>{
    //here you can write your code it will be called every time emit method is called
  })
 }

For more info you can check out this plunker