How can I refresh my table content from the child component in the parent component with click event?

Question

I have created a table in the child component and also stored a refresh function in it. Now I would like to call this in my parent component and execute it by clicking on the button. Can you please tell me how I can realize this?

My Code:

// Child-Component

ngOnInit() {
this.refresh();
}

  /**
   * Refresh Data Table
   */
  public refresh() {
    if (!this.isLoading) {
      this.all = false;
      this.clearRows();
      this.loadData();
    }
  }

  public clearRows() {
    const formArray = this.salesAreaForm.get('rows') as FormArray;
    formArray.clear();
  }

// Parent-Component

<button>Refresh Child-Component</button>
<app-child-component></app-child-component>

Answer 1

You should use ViewChild in the parent component.

import { ..., ViewChild } from '@angular/core';

@ViewChild(ChildComponent) childComponent: ChildComponent;

...
childComponent.refresh();
...

Answer 2

You could probably get the child component as a viewchild and simply call the method directly on the component.

  @ViewChild(ChildComponent) childComponent: ChildComponent;

  onClick() {
      childComponent.Refresh()
  }

I would normally prefer using a service for this though

Answer 3

There are multiple ways to do this.

1. Shared Service You can add the shared service for communication between parent and child component. It will allow the bidirectional communication as well. You can find the detailed info on the Angular site.

2. @ViewChild In your parent class add the following:

@ViewChild(ChildComponent) child:ChildComponent; 
onRefreshClick(){ 
    this.child.refresh() 
}

You will get an access to your child properties and method by using the ViewChild decorator. Then add a on-click handler to your button and call the refresh method in your child.

The detailed description you can find on the Angular site.

3. State Management

You can add the store to your app and listen for the events in the store. This is the preferable way, but its a good way for a middle-to-large apps.