angularangular2-components

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?

Solution

  • 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>