How to check whether ng-content exists
Solution 1
If you have a parent element of <ng-content>
with a template variable (#panelHeading
)
<div class="panel panel-default">
<div class="panel-heading" #panelHeading [hidden]="!showHeading">
<ng-content select="my-panel-heading"></ng-content>
</div>
<div class="panel-body">
<ng-content select="my-panel-content"></ng-content>
</div>
</div>
then you can query for it like
@ViewChild('panelHeading') panelHeading;
and set a property depending on whether there are children or not
constructor(private cdRef:ChangeDetectorRef) {}
showHeading:boolean = false;
ngAfterViewInit() {
this.showHeading = this.panelHeading.nativeElement && this.panelHeading.nativeElement.children.length > 0;
this.cdRef.detectChanges();
}
If <my-panel-heading>
is an Angular2 component, then you can also use
@ContentChild(MyPanelHeading) panelHeading:MyPanelHeading;
constructor(private cdRef:ChangeDetectorRef) {}
showHeading:boolean = false;
ngAfterViewInit() {
this.showHeading = this.panelHeading != null;
this.cdRef.detectChanges();
}
Solution 2
You'd have to remove all your spaces but you could do this with CSS if you really cared about it (ng-content doesn't take up space):
.panel-heading:empty { display: none }
<div class="panel-heading"><ng-content select="my-panel-heading"></ng-content></div>
Solution 3
Do:
<div class="panel panel-default">
<div class="panel-heading" [hidden]="!panelHeading.hasChildNodes()" #panelHeading>
<ng-content select="my-panel-heading"></ng-content>
</div>
<div class="panel-body">
<ng-content select="my-panel-content"></ng-content>
</div>
</div>
Note you can't use *ngIf
in this case, for catch-22 situation.
hendrix
2007-2012 student at Comenius University in Bratislava - Faculty of Mathematics, Physics and Informatics
Updated on June 18, 2022Comments
-
hendrix about 2 years
Suppose i have simple Bootstrap panel component with multiple transclusion slots. Template example:
<div class="panel panel-default"> <div class="panel-heading"> <ng-content select="my-panel-heading"></ng-content> </div> <div class="panel-body"> <ng-content select="my-panel-content"></ng-content> </div> </div>
I want to make panel-heading optional. How do i hide
<div class="panel-heading">
element, if there is no content provided for<ng-content select="my-panel-heading"></ng-content>