@ng-util/lazy NPM

@ng-util/lazy

Lazy load javascript, css resources for Angular.

Demo

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