communication between two child components

Question

I have two child components. One is a filter and another one is a table. When I click in a button which is in filter component I want to call onInit() from table component (or do something better for refresh the table). How can I do it?

something like this:

//function from filter component
filter() { ... }

//function from table component
populateTable(){  .... }


//I want to do something like
filter(){ this.populateTable(); }

Answer 1

How can i do it

Organize as a heirarchy

- Parent
  - Filter 
  - Table 

The state will be in Parent . A user interaction in Filter only requests Parent to change the state causing a re-render of the Table .

Answer 2

Solution1:

@ViewChild('tablecmp') tablecmp: TableComponent;
@Component({
  selector: 'filtercomp',
  .....
}
export class FilterComponent{
   filter(){
     this.tablecmp.table();
   }
}

Filter Component Template:

<tablecomp #tablecmp></tablecomp>

Table Component

@Component({
  selector: 'tablecomp',
  .....
}
export class TableComponent{
   table(){

   }
}

Solution2:

Instead of calling the child component function (table()) from parent component (filter(). You can apply filter for the data in the parent component and send the result to child component using @input() to display.

We prefer Solution2.