ANGULAR 7 reload component view

Question

I want to reload a component view by clicking button icon, without refreshing the whole page.

My view code:

<nb-card>
  <nb-card-header>
    <div class="row" style="font-size: 2.125rem !important;">
      <div class="col-sm-8">
        Tableau des Casiers 
      </div>
      <div class="col-sm-4 d-flex justify-content-end">
        <nb-action icon="ion-refresh sizeicone" (click)="refresh()"></nb-action>
      </div>
    </div>
  </nb-card-header>

  <nb-card-body>
    <ng2-smart-table [settings]="settings" (custom)="onCustom($event)" [source]="source"
      (deleteConfirm)="onDeleteConfirm($event)" (editConfirm)="onSaveConfirm($event)"
      (createConfirm)="onCreateConfirm($event)">
    </ng2-smart-table>
  </nb-card-body>
</nb-card>

Answer 1

In angular you don't need to refresh a component - angular will refresh page content automatically when it detects that variables, used on template, changes. So in refresh() method just update variables values. However if you really want to do it manually then you can use following construction:

template:

<my-component *ngIf="showComponent"></my-component>

ts file:

public refresh() {
   this.showComponent=false;
   setTimeout(x=>this.showComponent=true);
}