Simple Ng-Content Not Working in Angular 2

Simple Ng-Content Not Working in Angular 2

I try to transclude content. I have the following markup for the component:

<body>
    <bn-menu>
      <span>test</span>
      <p>I am content</p>
    </bn-menu>
  </body>

And the following component:

import { Component } from '@angular/core';
@Component({
  selector: 'bn-menu',
  template: '<div><div>Jo</div><ng-content></ng-content></div>'
})
export class MenuComponent { }

But only "Jo" gets displayed and not "test" or "I am content". What am I doing wrong?

1

1 Answer

It seems you are trying to display the content in the Root component, Content within the Root component are typically used for displaying content used while angular is booting up.

If you can wrap bn-menu inside some other root component it should work.

Check this SO question Component with <ng-content>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

James H. Sterling
Author

James H. Sterling

James Sterling reports on renewable energy developments, climate policy, ecological conservation, and green tech innovations around the globe.