@ng-util/lazy

Lazy load javascript, css resources for Angular.

Demo

• Stackblitz
• Codesandbox

Usage

import { Component } from '@angular/core';
import { NuLazyService } from '@ng-util/lazy';

@Component({
  selector: 'app-demo',
  template: ` <button *ngIf="loaded" type="button" class="btn btn-primary">Primary</button>`,
})
export class DemoComponent {
  loaded = false;

  constructor(private srv: NuLazyService) {
    this.load();
  }

  async load() {
    await this.srv.load([
      `https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css`,
      `https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.bundle.min.js`,
    ]);
    this.loaded = true;
  }
}

API

| name | type | description | | ---- | -- | ----------- | | monitor(paths: string ｜ Array<string ｜ NuLazyResources>) | Observable<NuLazyResult[]> | Monitor for the finished of paths | | clear() | void | Clean all cached items | | load(paths: string ｜ Array<string ｜ NuLazyResources>) | Promise<NuLazyResult[]> | Load the specified resources, includes .js, .css | | loadScript(path: string, options?: { innerContent?: string }) | Promise<NuLazyResult> | Load a script resources | | loadStyle(path: string, options?: { ref?: string, innerContent?: string }) | Promise<NuLazyResult> | Load a style resources |

License

The MIT License (see the LICENSE file for the full text)