Turn of lazy loading in ngSwitch

Question

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?

Answer 1

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