Angular: Lazy Loading Components (3 Part Series)
With the current Loader, you can set a placeholder (e.g. a button to trigger the loading) and once it's loaded + created the content of the loader will be switched to the loaded component.
But what if the connection is slow? (Well .. thats the main goal of this Series 😄, to improve the initial load performance of an angular app 😅) What if the Device is slow?
You could switch the placeholder content in your host-component (The component that uses the loader and sets the placeholder). But I kinda want to have a simpler way (less duplicate code for all of your host-components.)
So let's extend the loader with another
<ng-content> which only is visible during the load.
<ng-content *ngIf="componentLoading | async" select="[isLoading]"></ng-content>
select here uses an element attribute (
isLoading) to select what has to be projected there.
@Output() public componentLoading = new EventEmitter();
componentLoading just emits
false before and after the component is loading. Sadly I needed to add
private cd: ChangeDetectorRef // and this.cd.detectChanges();
EventEmitter / or rather the template, didn't do anything.
Example how to use it in your hosting-component:
<helpers-dynamic-loader component="my-own"> This is a placeholder, while nothing is loading, could also have a button to trigger the load :) <div isLoading> <mat-progress-spinner mode="indeterminate" [diameter]="24"></mat-progress-spinner> Component loading... </div> </helpers-dynamic-loader>
Click here for the latest version 🎉
The component-loader works fine for custom components, but the lazy-loaded-components can't use any other components. (This weirdly happens without an error).
- an example repo (started 🎉)
- maybe export the loader as a bit component?