Lazy Loaded Components - #3 Extending the Loader

Adding a loading Placeholder

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>

The select here uses an element attribute (isLoading) to select what has to be projected there.

  @Output()
  public componentLoading = new EventEmitter();

componentLoading just emits true/false before and after the component is loading. Sadly I needed to add

  private cd: ChangeDetectorRef

  // and

  this.cd.detectChanges();

otherwise the 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 🎉

Current limitations:

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

to be (also) done...

• an example repo (started 🎉)
• maybe export the loader as a bit component?