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>

score 11 · Accepted Answer · edited Mar 07 '20 at 19:29

11

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);
}

edited Mar 07 '20 at 19:29

Archer

1,062
1
13
32

answered Apr 02 '19 at 19:46

Kamil Kiełczewski

85,173
29
368
345

I was thinking about the same trick, such as hackish style but it works – Snowbases Aug 01 '19 at 10:20
Good hack but sometimes you can see the component disappear/appear. – Flyout91 Apr 06 '20 at 11:33

ANGULAR 7 reload component view

1 Answers1

Linked