Are you looking for lazyload Component for your angular app. If yes then in this post i am going to share simple angular lazy load plugin which support dynamic lazy load. You can dynamically fetch images and integrate this Dynamic Lazy Loadable Component.

Installation

Install via npm;

npm i ngx-loadable-component

* unfortunately, only an aot build angular setup will work correctly within the loadable component setup ? ️ .. an example of how this is setup can be seen within the base directory of this repo(app demo)

Setup

Create a component you wish to dynamically load… e.g. loadable component

upside-down-face-emoji.component.ts

@Component({
  selector: 'app-upside-down-face-emoji'
  ...
})
export class UpsideDownFaceEmojiComponent { }

* its important that this component does not use OnPush changeDetection as this will interfere with the loadable component setup

Then create a module for the loadable component:

upside-down-face-emoji.module.ts

import { LoadableComponentModule } from 'ngx-loadable-component';

import { UpsideDownFaceEmojiComponent } from './upside-down-face-emoji.component';

@NgModule({
  imports: [

    LoadableComponentModule.forChild(UpsideDownFaceEmojiComponent)
  ],
  declarations: [UpsideDownFaceEmojiComponent]
})
export class UpsideDownFaceEmojiComponentModule {}

Create a manifest file which lists all your loadable components:

app-loadable.manifests.ts

import { LoadableManifest } from 'ngx-loadable-component';

export enum LoadableComponentIds {
  UPSIDE_DOWN_FACE = 'UpsideDownFaceEmojiComponent'
}

export const appLoadableManifests: Array<LoadableManifest> = [
  {

    componentId: LoadableComponentIds.UPSIDE_DOWN_FACE,


    path: `loadable-${LoadableComponentIds.UPSIDE_DOWN_FACE}`,

    loadChildren: './components/upside-down-face-emoji/upside-down-face-emoji.module#UpsideDownFaceEmojiComponentModule'
  }
];

Add the loadable component manifest & loadable component module to root app module:

app.module.ts

import { LoadableComponentModule } from 'ngx-loadable-component';


import { appLoadableManifests } from './app-loadable.manifests';

@NgModule({
  declarations: [
      ...
  ],
  imports: [
    ...

    LoadableComponentModule.forRoot(appLoadableManifests)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Be sure to import the loadable component module into any feature modules you use it in:

my-feature.module.ts

import { LoadableComponentModule } from 'ngx-loadable-component';

@NgModule({
  declarations: [
      ...
  ],
  imports: [
    ...
    LoadableComponentModule.forFeature()
  ]
})
export class MyFeatureModule { }

Usage (basic)

Add a loadable component where needed:

app.component.html

<div class="app--emojis">

    <loadable-component [componentId]="UPSIDE_DOWN_FACE_COMPONENT_ID" [loadComponent]="loadUpsideDownFaceComponent">
        <!-- any element in the loadable component content area will only be shown whilst loadComponent is false -->
        <app-placeholder-emoji></app-placeholder-emoji>
    </loadable-component>

</div>

app.component.ts

import { LoadableComponentIds } from '../../app-loadable.manifests';

@Component({ ... })
export class AppComponent {

  UPSIDE_DOWN_FACE_COMPONENT_ID: string = LoadableComponentIds.UPSIDE_DOWN_FACE;




  loadUpsideDownFaceComponent: boolean = false;
}

Usage (with Inputs/Outputs)

If our loadable component has inputs/outputs – like so:

upside-down-face-emoji.component.html

<a (click)="onClick()">
    <div>?</div>
    <div>{{ text }}</div>
</a>

upside-down-face-emoji.component.ts

export class UpsideDownFaceEmojiComponent {
  @Input() text: string = 'upside down';

  @Output() clicked: EventEmitter<string> = new EventEmitter<string>();

  constructor() {}

  onClick(): void {
    this.clicked.emit(this.text);
  }
}

We then create a model representing the inputs/outputs (for some typing goodness ?):

upside-down-face-emoji.inputs.model.ts

import { LoadableComponentInputs } from 'ngx-loadable-component';

export interface UpsideDownFaceEmojiComponentInputs extends LoadableComponentInputs {
  text: string;
}

upside-down-face-emoji.outputs.model.ts

import { LoadableComponentOutputs } from 'ngx-loadable-component';

export interface UpsideDownFaceEmojiComponentOutputs extends LoadableComponentOutputs {
  clicked: Function;
}

And add our inputs/outputs to the loadable component wherever its used:

app.component.html

<div class="app--emojis">

    <loadable-component
        [componentId]="UPSIDE_DOWN_FACE_COMPONENT_ID"
        [loadComponent]="loadUpsideDownFaceComponent"
        [componentInputs]="upsideDownFaceInputs"
        [componentOutputs]="upsideDownFaceOutputs">
        <!-- any element in the loadable component content area will only be shown whilst loadComponent is false -->
        <app-placeholder-emoji></app-placeholder-emoji>
    </loadable-component>

</div>

app.component.ts

import { LoadableComponentIds } from '../../app-loadable.manifests';
import { UpsideDownFaceEmojiComponentInputs } from '../../components/upside-down-face-emoji/models/upside-down-face-emoji.inputs.model';
import { UpsideDownFaceEmojiComponentOutputs } from '../../components/upside-down-face-emoji/models/upside-down-face-emoji.outputs.model';

@Component({ ... })
export class AppComponent {

  UPSIDE_DOWN_FACE_COMPONENT_ID: string = LoadableComponentIds.UPSIDE_DOWN_FACE;




  loadUpsideDownFaceComponent: boolean = false;


  get upsideDownFaceInputs(): UpsideDownFaceEmojiComponentInputs {
    return {
      text: 'not upside down'
    }
  }


  get upsideDownFaceOutputs(): UpsideDownFaceEmojiComponentOutputs {
    return {
      clicked: (text: string) => this.onClickedUpsideDownFace(text)
    }
  }

  onClickedUpsideDownFace(text: string): void {
    console.log('?', text);
  }
}

And voila! we now have input/output binding ?.
* note that the inputs in the parent component (of the loadable component – e.g. upsideDownFaceInputs()) have to be within a getter or function for change detection to apply correctly

Usage (add custom css classes)

Custom css classes can be passed via the loadable component componentCssClasses input.
These will be added to the host element of the provided loadable component. e.g.

app.component.html

<div class="app--emojis">

    <loadable-component ... [componentCssClasses]="customCssClasses" >
        ...
    </loadable-component>

</div>

app.component.ts

@Component({ ... })
export class AppComponent {
  ...

  customCssClasses: Array<string> = ['my-custom--class--1', 'my-custom--class--2']
  ...
}

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by dan-harris. Visit their official repository for more information and follow for future updates.

---

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.