Angular2 dynamic component outlet
TypeScript JavaScript
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
integrationtest
src
.gitignore
.npmignore
README.md
index.ts
karma-test-shim.js
karma.conf.js
package.json
tsconfig.json
tslint.json

README.md

angular2-component-outlet

This project is closed and new ng-dynamic has started

npm version CircleCI

$ npm install --save angular2-component-outlet

Current Angular Version: 2.0.2

Live Demo: Plunker


ComponentOutlet is a directive to create dynamic component.

Example:

@Component({
  selector: 'my-app',
  template: `
    <div *componentOutlet="template; context: self; selector:'my-component'"></div>
  `
})
export class AppComponent {
  self = this;

  template = `
  <div>
    <p>Dynamic Component</p>
  </div>`;
}

@NgModule({
  providers: [
    provideComponentOutletModule({
      imports: [CommonModule]
    })
  ],
  declarations: [ComponentOutlet]
})
class AppModule {}

Result:

<my-app>
    <my-component>
        <div>
            <p>Dynamic Component</p>
        </div>
    </my-component>
</my-app>

Notes

  • ComponentOutlet needs RuntimeCompiler provided by platform-browser-dynamic. You cannot use platformBrowser instead of platformBrowserDynamic.
    • For AoT compilation, you can use platformBrowserDynamic().bootstrapModuleFactory().