How to add a child component in Angular2 Javascript (no typescript)

Question

I have a hello world program running in Angular2 RC5 without typescript. The first component loads without errors, but I can't get a child component to load. I get no errors--the child component content just doesn't render/display.

I also can't figure out how to put it up on plunkr or codepen, since there appears to be no CDNs for RCs. The 'npm install' version is at https://github.com/dolthead/ng2js .

 // app.module.js (function (app) { app.AppModule = ng.core.NgModule({ imports: [ng.platformBrowser.BrowserModule], declarations: [app.AppComponent, app.InputListComponent], bootstrap: [app.AppComponent] }) .Class({ constructor: function () { } }); document.addEventListener('DOMContentLoaded', function () { ng.platformBrowserDynamic .platformBrowserDynamic() .bootstrapModule(app.AppModule); }); })(window.app || (window.app = {})); // app.component.js (function (app) { app.AppComponent = ng.core.Component({ selector: 'my-app', templateUrl: 'app/app.component.html', imports: [app.InputListComponent], directives: [ app.InputListComponent, // child component ng.common.FORM_DIRECTIVES] // for ngModel }) .Class({ constructor: function () { } }); })(window.app || (window.app = {})); // input-list.component.js - the child component (function (app) { app.InputListComponent = ng.core.Component({ selector: 'input-list', templateUrl: 'app/input-list.component.html' }) .Class({ constructor: function () { console.log('input-list constructor'); var self = this; self.status = ''; self.statusList = []; self.addStatus = function() { self.statusList.push(this.status); this.status = ''; } } }); })(window.app || (window.app = {})); 

Answer 1

Here's how I got ng-model working with RC6 (js, no ts). Add the forms module to index.html:

<script src="node_modules/@angular/forms/bundles/forms.umd.js"></script>

And import the FormsModule in the NgModule meta data:

// app.module.js
(function (app) {

    app.AppModule =
        ng.core.NgModule({
            imports: [
                ng.platformBrowser.BrowserModule,
                ng.forms.FormsModule
            ],
            declarations: [
                app.AppComponent,
                app.InputListComponent
            ],
            providers: [],
            bootstrap: [app.AppComponent]
        })
        .Class({
            constructor: function AppModule() {
            }
        });

    document.addEventListener('DOMContentLoaded', function () {
        ng.platformBrowserDynamic
            .platformBrowserDynamic()
            .bootstrapModule(app.AppModule);
    });

})(window.app || (window.app = {}));

// app.component.js
(function (app) {

    app.AppComponent =
        ng.core.Component({
            selector: 'my-app',
            templateUrl: 'app/app.component.html',
            imports: [app.InputListComponent]
        })
        .Class({
            constructor: function () {
            }
        });

})(window.app || (window.app = {}));

// input-list.component.js - the child component
(function (app) {

    app.InputListComponent =
        ng.core.Component({
            selector: 'input-list',
            templateUrl: 'app/input-list.component.html'
        })
        .Class({
            constructor: function () {
                console.log('input-list constructor');
                var self = this;
                self.status = '';
                self.statusList = [];

                self.addStatus = function() {
                    self.statusList.push(this.status);
                    this.status = '';
                }
            }
        });

})(window.app || (window.app = {}));