Angular 8: detecta si un ng-content tiene contenido (o existe)

Solución:

Puede obtener una referencia al ng-content (Variable de plantilla) y luego acceda a esa variable en su componente para verificar la longitud del contenido de ese ng-content utilizando ViewChild

Entonces puedes usar el ngAfterViewInit gancho de ciclo de vida para comprobar ng-content largo

Tu código será así:

import { Component, Input, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-promohero-message-unit',
  template: `
    <div>
      <h3 class="text-white">{{ title }}</h3>
      <p class="text-white">
        <ng-content select="https://newbedev.com/angular-8-detect-if-a-ng-content-has-content-in-it-or-exists
"></ng-content>
      </p>
      <p class="text-white" *ngIf="readMore">
        <ng-content #readMoreContent select="[readmoretext]"></ng-content>
      </p>
    </div>
    <p>
      <a class="text-white" (click)="showReadMore()" *ngIf="something"><u>Read more</u></a>
    </p>
  `
})
export class PromoheroMessageUnitComponent {
  @Input()
  title: string;
  @ViewChild('readMoreContent') readMoreContent: ElementRef;

  readMore = false;

  ngAfterViewInit() {
    if (this.readMoreContent.nativeElement.childNodes.length.value == 0){
      this.readMore = false
    }
  }

  showReadMore() {
    this.readMore = true;
  }
}

En Angular 8 no tiene que usar el gancho del ciclo de vida ngAfterViewInit. Puede usar ngOnInit siempre que establezca el valor “estático” de viewchild en verdadero.

import { Component, OnInit, ViewChild, TemplateRef, ElementRef } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {
  @ViewChild('content', { read: ElementRef, static: true }) content: ElementRef;
  constructor() { }

  ngOnInit() {
    console.log(!!this.content.nativeElement.innerHTML);  // return true if there is a content
  }
}

Tenga en cuenta que debe envolver la directiva ng-content con la etiqueta html (como div, span, etc.) y establecer templateRef en esta etiqueta externa.

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

Lo puse en stackblitz: https://stackblitz.com/edit/angular-8-communicating-between-components-mzneaa?file=app/app.component.html

---

---

Utiliza Nuestro Buscador