In Angular2, How Can I Detect Is There Any Ng-content?

plnkr demo here @Component({ selector: 'my-demo', template: `This is ` }) export class DemoComponent { name = 'Angular';

Solution 1:

Günter Zöchbauer's solution is acceptable, doesn't affect the useage, let the component detect this, I also found a easier way to do this without any json by using the :empty

<!-- must no content: https://css-tricks.com/almanac/selectors/e/empty/ --><!--@formatter:off--><divclass="title"><ng-contentselect=".nav-title"></ng-content></div><!--@formatter:on-->

.title:empty {
  display: none;
}

Works for any html+css.

Solution 2:

template: `This is <span #wrapper><ng-contentselect=".content"></ng-content></span>`

@ViewChild('wrapper') wrapper:ElementRef;

ngAfterContentInit() {
    console.log(this.wrapper.innerHTML); // or `wrapper.text`
}

See also

• Get component child as string
• Access transcluded content

Solution 3:

if you want to use conditional statement with *ngIf and else the yes it's possible

@Component({
  selector: 'my-demo',
  template: `<div *ngIf='content; else noContent'>
This is <ng-content select=".content"></ng-content>
</div>

<ng-template #noContent>No content</ng-template>`
})
export class DemoComponent { name = 'Angular'; content = true}

Demo