Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
src
.editorconfig
.gitignore
.npmignore
CHANGELOG.md
README.md
angular.json
karma.conf.js
ng-package.json
package.json
tsconfig.json
tslint.json

README.md

Build Status Greenkeeper badge

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) {
    }
    
}