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?
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.