Dynamic Angular 2 Components

.gitignore

@@ -1,5 +1,10 @@
 .idea/
+*.iml
+
 node_modules/
 typings/
+
 npm-debug.log
-output/
+
+# other
+.DS_Store

README.md

@@ -1,17 +1,18 @@
 
-ag-Grid
-==============
+Angular 2 Dynamic Components
+============================
 
-Example of using ag-Grid with Angular2 and TypeScript
+Example of creating Angular 2 Components Dynamically
 
 Building
 ==============
 
+== Build ==
+
 To build:
 - `npm install`
-- `npm install tsd -g`
-- `tsd install es6-shim`
 - `npm run tsc`
 
 To Run:
 - `npm run lite`
+

app/app.component.ts

@@ -1,15 +1,13 @@
-import {Component,ViewContainerRef,Input} from '@angular/core';
-import {AgGridNg2} from 'ag-grid-ng2/main';
-import {AgGridCellRendererFactory} from 'ag-grid-ng2/main';
-import {GridOptions} from 'ag-grid/main';
-import {FromComponentComponent} from "./from-component.component";
-import {FromTemplateComponent} from "./from-template.component";
-import {FromRichComponent} from "./from-rich.component";
+import {Component} from "@angular/core";
+import {DynamicComponent} from "./dynamic.component";
 
 @Component({
     selector: 'my-app',
-    templateUrl: 'app/app.component.html',
-    directives: [FromComponentComponent, FromTemplateComponent, FromRichComponent]
+    template: `<grid-component [componentType]="getComponentType()"></grid-component>
+  `
 })
 export class AppComponent {
+    getComponentType() : any {
+        return DynamicComponent;
+    }
 }

app/app.module.ts

@@ -0,0 +1,16 @@
+import {NgModule} from "@angular/core";
+import {BrowserModule} from "@angular/platform-browser";
+import {GridModule} from "./grid.module";
+import {DynamicComponent} from "./dynamic.component";
+import {AppComponent} from "./app.component";
+
+@NgModule({
+    imports: [
+        BrowserModule,
+        GridModule.withComponents([DynamicComponent])
+    ],
+    declarations: [AppComponent, DynamicComponent],
+    bootstrap: [AppComponent]
+})
+export class AppModule {
+}

app/boot.ts

@@ -1,4 +1,4 @@
-import {bootstrap} from '@angular/platform-browser-dynamic';
-import {AppComponent} from './app.component';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {AppModule} from './app.module';
 
-bootstrap(AppComponent);
+platformBrowserDynamic().bootstrapModule(AppModule);

app/dynamic.component.ts

@@ -0,0 +1,8 @@
+import {Component} from "@angular/core";
+
+@Component({
+    selector: 'dynamic-component',
+    template: '<span> Dynamic Component! </span>',
+})
+export class DynamicComponent {
+}