angular - change - Cómo comprobar si existe ng-content

meta tags angular 6

Question

Supongamos que tengo un componente simple del panel Bootstrap con múltiples ranuras de transclusión. Ejemplo de plantilla:

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

Quiero hacer panel-título opcional. ¿Cómo oculto el elemento <div class="panel-heading"> , si no hay contenido proporcionado para <ng-content select="my-panel-heading"></ng-content>

Answer 1

Si tiene un elemento principal de <ng-content> con una variable de plantilla ( #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>

entonces puedes consultarla como

@ViewChild(''panelHeading'') panelHeading;

y establecer una propiedad dependiendo de si hay niños o no

constructor(private cdRef:ChangeDetectorRef) {}
showHeading:boolean = false;
ngAfterViewInit() {
this.showHeading = this.panelHeading.nativeElement && this.panelHeading.nativeElement.children.length > 0;
this.cdRef.detectChanges();
}

Si <my-panel-heading> es un componente Angular2, entonces también puede usar

@ContentChild(MyPanelHeading) panelHeading:MyPanelHeading;
constructor(private cdRef:ChangeDetectorRef) {}
showHeading:boolean = false;
ngAfterViewInit() {
this.showHeading = this.panelHeading != null;
this.cdRef.detectChanges();
}

Answer 2

Tendrías que eliminar todos tus espacios pero podrías hacer esto con CSS si realmente te importara (ng-content no ocupa espacio):

.panel-heading:empty { display: none }
<div class="panel-heading"><ng-content select="my-panel-heading"></ng-content></div>