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>