CODEWITHSUNDEEP
angulartransclusion
Scottie
Scottie

Reputation: 11308

Why is ng-content removing the rest of my content?

Starting my first Angular 2 app, and I'm trying to get <ng-content> to work, however, it's doing strange things...

My main.ts:

import { bootstrap } from 'angular2/platform/browser';
import { AppComponent } from './app.component';

bootstrap(AppComponent, [])
    .then(success => console.log('Bootstrap success'))
    .catch(error => console.log(error));

app.component.ts:

import { Component } from 'angular2/core';

@Component({
    selector: 'my-app',
    templateUrl: '/app/app.component.html'
})

export class AppComponent {
}

and app.component.html:

<div class="container-fluid contentArea">
    Test before
    <ng-content></ng-content>
    Test after
</div>

In my index.html, I have this:

<my-app>
    Test
</my-app>

What happens is that I see 

Test Before Test After

for about 2 seconds until Angular bootstraps, then it clears the page and I see only 

Test

What am I doing wrong here and how do I keep the Test Before Test After on my page?

Upvotes: 1

Views: 566

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657118

Transclusion on the root component is not supported. This works only within component templates but not from index.html to a component.

Upvotes: 1

Related Questions