angularlazy-loadingpreloadingng-switch

Turn of lazy loading in ngSwitch


I have this code:

<ng-container [ngSwitch]="currentTab">
  <div [@ngSwitch]="'show'" *ngSwitchCase="1"><app-sub-search></app-sub-search></div>
  <div [@ngSwitch]="'show'" *ngSwitchCase="2"><app-filters></app-filters></div>
  <div [@ngSwitch]="'show'" *ngSwitchCase="3"><app-map></app-map></div>
</ng-container>

app-map contains google map and evey time Im switching to this tab its loads from the beginig. How I can here switch lazy loading off, that map will be loaded one time?


Solution

  • You could use the hidden directive instead of *ngSwitchCase on components you want to eager load.

    <ng-container [ngSwitch]="currentTab">
      <div *ngSwitchCase="1"><app-sub-search></app-sub-search></div>
      <div *ngSwitchCase="2"><app-filters></app-filters></div>
      <div [hidden]="currentTab !== 3"><app-map></app-map></div>
    </ng-container>
    

    Using hidden will allow an instance of <app-map> to be created on load, but will keep it hidden when required.

    DEMO: https://stackblitz.com/edit/angular-vfnzja