ng-util
@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 {
private srv = inject(NuLazyService);
loaded = false;
constructor() {
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)