Supposons que j'ai un composant:

@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 {
}

Maintenant, je voudrais afficher du contenu par défaut si <ng-content>pour ce composant est vide. Existe-t-il un moyen simple de le faire sans accéder directement au DOM?

Enveloppez ng-contentdans un élément HTML comme a divpour obtenir une référence locale à celui-ci, puis liez l' ngIfexpression à ref.children.length == 0:

template: `<div #ref><ng-content></ng-content></div> 
           <span *ngIf="ref.nativeElement.childNodes.length == 0">
              Display this if ng-content is empty!
           </span>`

Il manque des réponses @pixelbits. Nous devons vérifier non seulement la childrenpropriété, car tout childrensaut de ligne ou espace dans le modèle parent entraînera un élément avec du texte vide \ sauts de ligne. Mieux vaut vérifier .innerHTMLet .trim()ça.

Exemple de travail:

<span #ref><ng-content></ng-content></span>
<span *ngIf="!ref.innerHTML.trim()">
    Content if empty
</span>

MODIFIER 17.03.2020

CSS pur (2 solutions)

Fournit du contenu par défaut si rien n'est projeté dans ng-content.

Sélecteurs possibles:

1. :only-childsélecteur. Voir cet article ici:: Sélecteur pour enfant unique

   ^{Celui-ci nécessite moins de code / balisage. Prise en charge depuis IE 9: Puis-je utiliser: enfant unique}

2. :emptysélecteur. Lisez plus loin.

   ^{Prise en charge d'IE 9 et partiellement depuis IE 7/8: https://caniuse.com/#feat=css-sel3}

HTML

<div class="wrapper">
    <ng-content select="my-component"></ng-content>
</div>
<div class="default">
    This shows something default.
</div>

CSS

.wrapper:not(:empty) + .default {
    display: none;
}

Au cas où ça ne marche pas

Sachez qu'avoir au moins un espace blanc est considéré comme n'étant pas vide. Angular supprime les espaces, mais juste au cas où ce ne serait pas le cas:

<div class="wrapper"><!--
    --><ng-content select="my-component"></ng-content><!--
--></div>

ou

<div class="wrapper"><ng-content select="my-component"></ng-content</div>

Lorsque vous injectez le contenu, ajoutez une variable de référence:

<div #content>Some Content</div>

et dans votre classe de composant, obtenez une référence au contenu injecté avec @ContentChild ()

@ContentChild('content') content: ElementRef;

donc dans votre modèle de composant, vous pouvez vérifier si la variable de contenu a une valeur

<div>
  <ng-content></ng-content>
  <span *ngIf="!content">
    Display this if ng-content is empty!
  </span>    
</div> 

Injectez elementRef: ElementRefet vérifiez si elementRef.nativeElementa des enfants. Cela pourrait fonctionner uniquement avecencapsulation: ViewEncapsulation.Native .

Enveloppez l' <ng-content>étiquette et vérifiez si elle a des enfants. Cela ne fonctionne pas avec encapsulation: ViewEncapsulation.Native.

<div #contentWrapper>
  <ng-content></ng-content>
</div>

et vérifiez s'il a des enfants

@ViewChild('contentWrapper') contentWrapper;

ngAfterViewInit() {
  contentWrapper.nativeElement.childNodes...
}

(pas testé)

Si vous voulez afficher un contenu par défaut, pourquoi n'utilisez-vous pas simplement le sélecteur 'only-child' de css.

https://www.w3schools.com/cssref/sel_only-child.asp

par exemple: HTML

<div>
  <ng-content></ng-content>
  <div class="default-content">I am deafult</div>
</div>

css

.default-content:not(:only-child) {
   display: none;
}

Avec Angular 10, cela a légèrement changé. Vous utiliseriez:

<div #ref><ng-content></ng-content></div> 
<span *ngIf="ref.children.length == 0">
  Display this if ng-content is empty!
</span>

Dans mon cas, je dois masquer le parent du ng-content vide:

<span class="ml-1 wrapper">
  <ng-content>
  </ng-content>
</span>

Le CSS simple fonctionne:

.wrapper {
  display: inline-block;

  &:empty {
    display: none;
  }
}

J'ai implémenté une solution en utilisant @ContentChildren décorateur , qui est en quelque sorte similaire à la réponse de @ Lerner.

Selon la documentation , ce décorateur:

Obtenez la QueryList des éléments ou des directives du DOM de contenu. Chaque fois qu'un élément enfant est ajouté, supprimé ou déplacé, la liste de requêtes sera mise à jour et les modifications observables de la liste de requêtes émettront une nouvelle valeur.

Ainsi, le code nécessaire dans le composant parent sera:

<app-my-component>
  <div #myComponentContent>
    This is my component content
  </div>
</app-my-component>

Dans la classe de composants:

@ContentChildren('myComponentContent') content: QueryList<ElementRef>;

Ensuite, dans le modèle de composant:

<div class="container">
  <ng-content></ng-content>
  <span *ngIf="*ngIf="!content.length""><em>Display this if ng-content is empty!</em></span>
</div>

Exemple complet : https://stackblitz.com/edit/angular-jjjdqb

J'ai trouvé cette solution implémentée dans des composants angulaires, pour matSuffix, dans le composant form-field .

Dans la situation où le contenu du composant est injecté ultérieurement, après l'initialisation de l'application, on peut également utiliser une implémentation réactive, en souscrivant à l' changesévénement du QueryList:

export class MyComponentComponent implements AfterContentInit, OnDestroy {
  private _subscription: Subscription;
  public hasContent: boolean;

  @ContentChildren('myComponentContent') content: QueryList<ElementRef>;

  constructor() {}

  ngAfterContentInit(): void {
    this.hasContent = (this.content.length > 0);
    this._subscription = this.content.changes.subscribe(() => {
      // do something when content updates
      //
      this.hasContent = (this.content.length > 0);
    });
  }

  ngOnDestroy() {
    this._subscription.unsubscribe();
  }

}

Exemple complet : https://stackblitz.com/edit/angular-essvnq