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
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}
Post a Comment for "In Angular2, How Can I Detect Is There Any Ng-content?"