Async Component Loader

A small Angular Library to load standalone components asynchronously

• 👩‍💻 checkout the sample app

UI Demo

Install

Yarn

yarn add @gernsdorfer/async-component-loader

NPM

npm install @gernsdorfer/async-component-loader

Usage

1. import the AsyncComponentLoaderComponent into your module or component

import {AsyncComponentLoaderComponent, LazyComponentCreator} from "@gernsdorfer/async-component-loader";

@NgModule({
  // ...
  imports: [AsyncComponentLoaderComponent],
  // ...
})

@Component({
  selector: 'my-component',
  template: `
   <async-component-loader 
                  [lazyComponentCreator]="counterComponent"
                  [inputs]="{counter}">
    <ng-container isLoading>Loading</ng-container>
  </async-component-loader>
  `,
})
class MyComponent {
  counter = 0;
  counterComponent = new LazyComponentCreator<CounterComponent>({
      component: async () => (await import('./components/counter/counter.component')).CounterComponent,
      outputs: {
        increment: (newCount = 0) => this.counter = newCount
      }
    }
  )
}

That's it 🥳