update content to ng-content

ionic/components/app/app.ts

@@ -1,4 +1,4 @@
-import {bootstrap, Compiler, ElementRef, NgZone, bind, ViewRef} from 'angular2/angular2';
+import {bootstrap, Compiler, ElementRef, NgZone, bind, ViewRef, DynamicComponentLoader} from 'angular2/angular2';
 import {AppViewManager} from 'angular2/src/core/compiler/view_manager';
 import {NgZone} from 'angular2/src/core/zone/ng_zone';
 
@@ -92,38 +92,13 @@ export class IonicApp {
    * @return Promise that resolves with the ContainerRef created
    */
   appendComponent(component: Type, context=null) {
-    return new Promise((resolve, reject) => {
-      let injector = this.injector();
-      let compiler = injector.get(Compiler);
-      let viewMngr = injector.get(AppViewManager);
-      let rootComponentRef = this._ref._hostComponent;
-      let viewContainerLocation = rootComponentRef.location;
+    let loader = this.injector().get(DynamicComponentLoader);
+    let rootComponentRef = this.ref()._hostComponent;
 
-      compiler.compileInHost(component).then(protoViewRef => {
-        let atIndex = 0;
-
-        let hostViewRef = viewMngr.createViewInContainer(
-                                      viewContainerLocation,
-                                      atIndex,
-                                      protoViewRef,
-                                      null,
-                                      injector);
-
-        hostViewRef.elementRef = new ElementRef(hostViewRef, 0, viewMngr._renderer);
-        hostViewRef.instance = viewMngr.getComponent(hostViewRef.elementRef);
-        util.extend(hostViewRef.instance, context);
-
-        hostViewRef.dispose = () => {
-          viewMngr.destroyViewInContainer(viewContainerLocation, 0, 0, hostViewRef.viewRef);
-        };
-
-        resolve(hostViewRef);
-
-      }).catch(err => {
-        console.error('appendComponent:', err);
-        reject(err);
-      });
-    });
+    return loader.loadNextToLocation(component, rootComponentRef.location)
+              .catch(err => {
+                console.error('appendComponent:', err);
+              });
   }
 
   applyBodyCss(bodyEle, platform, config) {

ionic/components/app/test/hn/index.ts

@@ -10,7 +10,7 @@ import {HNSinglePost} from './pages/single';
   selector: 'story'
 })
 @IonicView({
-  template: '<div class="hn-story"><content></content></div>'
+  template: '<div class="hn-story"><ng-content></ng-content></div>'
 })
 export class Story {
   constructor() {

ionic/components/aside/aside.ts

@@ -37,7 +37,7 @@ import {dom} from 'ionic/util'
   events: ['opening']
 })
 @View({
-  template: '<content></content>'
+  template: '<ng-content></ng-content>'
 })
 export class Aside extends Ion {
 

ionic/components/checkbox/checkbox.ts

@@ -27,7 +27,7 @@ import {Icon} from '../icon/icon';
     '<div class="checkbox-icon"></div>' +
   '</div>' +
   '<div class="item-content">' +
-    '<content></content>' +
+    '<ng-content></ng-content>' +
   '</div>'
 })
 export class Checkbox extends IonInputItem {

ionic/components/content/content.ts

@@ -16,7 +16,7 @@ import {ScrollTo} from '../../animations/scroll-to';
   }
 })
 @View({
-  template: '<div class="scroll-content"><content></content></div>'
+  template: '<div class="scroll-content"><ng-content></ng-content></div>'
 })
 export class Content extends Ion {
   constructor(elementRef: ElementRef, config: IonicConfig) {

ionic/components/item/item.ts

@@ -24,7 +24,7 @@ import {dom} from 'ionic/util';
         <!--<content select="ion-item-accessory"></content>-->
       </div>
       <div class="item-label">
-        <content></content>
+        <ng-content></ng-content>
       </div>
     </div>
     <!--

ionic/components/layout/layout.ts

@@ -6,7 +6,7 @@ import {Component, View, ElementRef} from 'angular2/angular2'
 })
 @View({
   template: `
-    <content></content>
+    <ng-content></ng-content>
     <object class="ele-qry" data="about:blank"></object>
   `
 })

ionic/components/nav/nav.ts

@@ -20,11 +20,11 @@ import {ViewController} from '../view/view-controller';
 export class Nav extends ViewController {
 
   constructor(
-    @Optional() AncestorViewCtrl: ViewController,
+    @Optional() ancestorViewCtrl: ViewController,
     injector: Injector,
     elementRef: ElementRef
   ) {
-    super(AncestorViewCtrl, injector, elementRef);
+    super(ancestorViewCtrl, injector, elementRef);
   }
 
   onIonInit() {

ionic/components/radio/radio.ts

@@ -78,7 +78,7 @@ export class RadioGroup extends Ion {
 @IonicView({
   template:
   '<div class="item-content">' +
-    '<content></content>' +
+    '<ng-content></ng-content>' +
   '</div>' +
   '<div class="item-media media-radio">' +
     '<div class="radio-icon"></div>' +

ionic/components/scroll/scroll.ts

@@ -20,7 +20,7 @@ import {IonicComponent} from '../../config/annotations';
   }
 })
 @View({
-  template: '<div class="scroll-content"><content></content></div>'
+  template: '<div class="scroll-content"><ng-content></ng-content></div>'
 })
 export class Scroll extends Ion {
   constructor(elementRef: ElementRef, ionicConfig: IonicConfig) {

ionic/components/segment/segment.ts

@@ -29,7 +29,7 @@ import {dom} from 'ionic/util';
   }
 })
 @View({
-  template: '<div class="ion-segment"><content></content></div>',
+  template: '<div class="ion-segment"><ng-content></ng-content></div>',
   directives: [forwardRef(() => SegmentButton)]
 })
 export class Segment extends Ion {

ionic/components/slides/slides.ts

@@ -30,7 +30,7 @@ import * as util from 'ionic/util';
   ]
 })
 @View({
-  template: '<div class="slides-view"><content></content></div>'
+  template: '<div class="slides-view"><ng-content></ng-content></div>'
 })
 export class Slides {
   constructor(elementRef: ElementRef) {

ionic/components/switch/switch.ts

@@ -24,7 +24,7 @@ import {Icon} from '../icon/icon';
 @IonicView({
   template:
   '<div class="item-content">' +
-    '<content></content>' +
+    '<ng-content></ng-content>' +
   '</div>' +
   '<div class="item-media media-switch">' +
     '<div class="switch-track">' +

ionic/components/tabs/tab.ts

@@ -21,7 +21,7 @@ import {Tabs} from './tabs';
   }
 })
 @View({
-  template: '<template pane-anchor></template><content></content>',
+  template: '<template pane-anchor></template><ng-content></ng-content>',
   directives: [forwardRef(() => TabPaneAnchor)]
 })
 export class Tab extends ViewController {

ionic/components/tabs/tabs.ts

@@ -24,7 +24,7 @@ import {IonicComponent, IonicView} from '../../config/annotations';
       '</div>' +
     '</nav>' +
     '<section class="content-container">' +
-      '<content></content>' +
+      '<ng-content></ng-content>' +
     '</section>',
   directives: [forwardRef(() => TabButton)]
 })