Angular2 dynamic component outlet
TypeScript JavaScript
Latest commit ba63c88 Nov 14, 2016 @laco0416 committed on GitHub Merge pull request #37 from laco0416/laco0416-patch-1
close project
Permalink
Failed to load latest commit information.
integrationtest fix: compat to ngc Sep 15, 2016
src style(core): Add tslint Oct 13, 2016
.gitignore
.npmignore
README.md
index.ts
karma-test-shim.js feat: Update to RC.6 Sep 6, 2016
karma.conf.js feat: Update to RC.6 Sep 6, 2016
package.json
tsconfig.json fix: compat to ngc Sep 15, 2016
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().