dynamic-angular-component v0.1.0-alpha.1

dynamic-angular-component

Simple dynamic component for Angular 4+. Supports tree-shaking & AoT build processes; compatible with browser, Web Worker, & Universal execution environments.

Installation & Integration

Install package:

$ npm install dynamic-angular-component --save

Integrate module:

import { DynamicComponentModule } from 'dynamic-angular-component';

@NgModule({
  imports: [DynamicComponentModule],
  ...
})
class AppModule {}

Usage

Template usage:

<dynamic-component [componentType]="SomeComponentTypeReference">
  <!-- Some component instance will reside here! -->
</dynamic-component>

Component usage:

import { Component, Type } from '@angular/core'

import { BarComponent } from './bar.component';
import { BazComponent } from './baz.component';

...
@Component({
  ...
  template: `<dynamic-component #container [componentType]="componentType"></dynamic-component>`
})
class FooComponent {
  ...
  @ViewChild('container') public dynamicComponentRef;

  /**
   * Default dynamic component to Bar.
   */
  protected componentType: Type<Component> = BarComponent;

  ...
  // On some event, change dynamic component to Baz.
  public onSomeEvent(): void {
    this.componentType = BazComponent; // Template input via data-binding.
    // OR
    this.dynamicComponentRef.load(BazComponent); // Programmatic/explicit.
  }
}

API

Inputs

• componentType: Type<Component>: Type of component to be loaded.

Methods

• clear(): void: Remove currently loaded component.
• getComponentRef(): ComponentRef<Component>: Get currently loaded component reference.
• getComponentType(): Type<Component>: Get type of currently loaded component.
• getViewContainerRef(): ViewContainerRef<Component>: Get dynamic component's view container reference.
• load(componentType: Type<Component>): void: Load component from specified component type.
• ngOnChanges(): void: Load component when component type changes from template input.

License

MIT