Angular2 + Es6. Render child component

Question

I'm trying to get a hold of angular2 with ES6, no TypeScript. The problem is that I can't figure out how to render a child component. I have this base-component, which just holds the app. In that component I want to be able to also render, lets say, a header-component and a footer-component. Right now only my base-component gets rendered.

How would I do that?

Here's my code:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <application>
        <header></header>
    </application>

    <script src="/node_modules/zone.js/dist/zone.js"></script>
    <script src="/node_modules/reflect-metadata/Reflect.js"></script>
    <script src="/dist/js/app.js"></script>

</body>

app.js

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {Header} from './components/app.header';

class Base {
    static get annotations() {
        return [
            new Component({
                selector: "body",
                template: '<application>base</application>'
            }),
        ];
    }

    constructor () {}
}

export {Base};

bootstrap(Base);

app.header.js

import {Component} from 'angular2/core';

class Header {
    static get annotations() {
        return [
            new Component({
                selector: 'header',
                template: '<h1>header</h1>'
            }),
        ];
    }

    constructor () {}
}

export {Header};

Answer 1

I think that the problem is how you're defining your selectors and templates.

In index.html

Change:

<body>
    <application>
        <header></header>
    </application>

Into:

<body>
    <application></application>

In app.js

new Component({
    selector: "application",
    template: '<app-header></app-header>'
}),

Then you could change your app.js template to include the footer:

new Component({
    selector: "application",
    template: '<app-header></app-header><app-footer></app-footer>'
}),

You normally don't want anything between your tags:

<application>Nothing goes here</application>
<app-header>Nothing goes here</app-header>
<app-footer>Nothing goes here</app-footer>

Unless these are "structural directives" that behave like *ngIf or *ngFor . Here's the docs:

https://angular.io/docs/ts/latest/guide/structural-directives.html

I hope this helps.

Angular2 + Es6. Render child component

Question

1 answers

solution1
2 ACCPTED 2016-10-28 15:33:15

Angular2 + Es6. Render child component

Question

1 answers

solution1 2 ACCPTED 2016-10-28 15:33:15

solution1
2 ACCPTED 2016-10-28 15:33:15