Todd Hale Todd Hale - 3 months ago 26
Javascript Question

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

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

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 = {}));