@wishtack/reactive-component-loader
v1.1.2
Published
Lazy load Angular components without even using the router.
Downloads
152
Readme
What is Reactive Component Loader?
@wishtack/reactive-component-loader
is an Angular module that allows:
- declarative dynamic component insertion,
- component lazy loading and not only with the router (even with AOT enabled),
- passing @Inputs and @Outputs easily to the dynamically inserted component (using ng-dynamic-component).
Getting Started
1. Install
yarn add @wishtack/reactive-component-loader
or npm install --save @wishtack/reactive-component-loader
2. Setup
Add ReactiveComponentLoaderModule.forRoot()
to the root module.
import { ReactiveComponentLoaderModule } from '@wishtack/reactive-component-loader';
@NgModule({
...
imports: [
ReactiveComponentLoaderModule.forRoot()
]
...
})
export class AppModule {
}
3. Declare lazy loaded modules
@NgModule({
...
imports: [
ReactiveComponentLoaderModule.withModule({
moduleId: 'todo-form-v1',
loadChildren: './todo-form-v1/todo-form-v1.module#TodoFormV1Module'
}),
ReactiveComponentLoaderModule.withModule({
moduleId: 'todo-form-v2',
loadChildren: './todo-form-v2/todo-form-v2.module#TodoFormV2Module'
}),
]
...
})
export class TodoListModule {
}
4. Lazy load components
Using <wt-lazy>
...
@Component({
template: `
<wt-lazy
[location]="todoFormComponentLocation"
[inputs]="{keywords: keywords}"
[outputs]="{keywordsChange: onKeywordsChange}">
`
})
export class SomeFeatureComponent {
todoFormComponentLocation = {
moduleId: 'todo-form-v1',
selector: 'wt-todo-form-v1'
};
onKeywordsChange = (keywords: string) => {
...
}
}
... or ngComponentOutlet
@Component({
template: `
<ng-container *ngIf="todoFormComponentRecipe$ | async as recipe">
<ng-container *ngComponentOutlet="recipe.componentType; ngModuleFactory: recipe.ngModuleFactory"
</ng-container>
`
})
export class SomeFeatureComponent {
todoFormComponentRecipe$ = this._reactiveComponentLoader.getComponentRecipe({
moduleId: 'todo-form-v1',
selector: 'wt-todo-form-v1'
});
constructor(private _reactiveComponentLoader: ReactiveComponentLoader) {
}
}