Supongamos que tengo un componente:
@Component({ selector: 'MyContainer', template: ` <div class="container"> <!-- some html skipped --> <ng-content></ng-content> <span *ngIf="????">Display this if ng-content is empty!</span> <!-- some html skipped --> </div>` }) export class MyContainer { } Ahora, me gustaría mostrar algún contenido predeterminado si <ng-content> para este componente está vacío. ¿Hay una manera fácil de hacer esto sin acceder directamente al DOM?
Envuelva ng-content en un elemento HTML como un div para obtener una referencia local, luego vincule la expresión ngIf a ref.children.length == 0 :
template: `<div #ref><ng-content></ng-content></div> <span *ngIf=" ! ref.children.length"> Display this if ng-content is empty! </span>`Actualizado para Angular 12; La lógica antigua ("
ref.nativeElement.childNodes.length") da error, ya quenativeElementno estáundefinedhoy en día.
EDITAR 17.03.2020
Proporciona contenido predeterminado si no se proyecta nada en ng-content.
:only-child . Vea esta publicación aquí: Selector de hijo único
Este requiere menos código / marcado. Soporte desde IE 9: ¿Puedo usar: hijo único?
:empty . Simplemente lea más.
Soporte desde IE 9 y parcialmente desde IE 7/8: https://caniuse.com/#feat=css-sel3
<div class="wrapper"> <ng-content select="my-component"></ng-content> </div> <div class="default"> This shows something default. </div> .wrapper:not(:empty) + .default { display: none; }En caso de que no funcione
Tenga en cuenta que tener al menos un espacio en blanco se considera que no está vacío. Angular elimina los espacios en blanco, pero por si acaso, si no es así:
<div class="wrapper"><!-- --><ng-content select="my-component"></ng-content><!-- --></div>o
<div class="wrapper"><ng-content select="my-component"></ng-content></div>Faltan algunos en la respuesta de @pixelbits. Necesitamos verificar no solo la propiedad de los children , porque cualquier salto de línea o espacio en la plantilla principal hará que el elemento de los children tenga texto en blanco\saltos de línea. Es mejor verificar .innerHTML y .trim() .
Ejemplo de trabajo:
<span #ref><ng-content></ng-content></span> <span *ngIf="!ref.innerHTML.trim()"> Content if empty </span>