عرض تفاعلي: كيفية إظهار رسالة عندما يكون ng-content فارغًا في Angular 2

To conditionally display content based on whether ng-content has content or is empty in Angular 2, you can use a combination of ng-content and template reference variables along with ngIf directive. Here’s how you can do it:

htmlCopy code

<div #contentWrapper [hidden]="isOpen">
    <ng-content>ng-content>
div>

<ng-template #emptyContent>
    <p>Display this if ng-content is empty!p>
ng-template>

<ng-container *ngIf="!hasContent; then emptyContent">ng-container>

typescriptCopy code
// app.component.ts
import { Component, AfterContentChecked, ContentChild } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterContentChecked {
  @ContentChild('contentWrapper') contentWrapper: any;

  ngAfterContentChecked() {
    this.hasContent = !!this.contentWrapper.nativeElement.textContent.trim();
  }
}

In this example, we use a template reference variable #contentWrapper to refer to the div containing the ng-content. We then use *ngIf with the emptyContent template to conditionally display the content based on whether ng-content is empty or not.

The ngAfterContentChecked lifecycle hook is used to check if the ng-content has any content by checking the text content of the contentWrapper element. If the text content is empty, hasContent is set to false, otherwise, it is set to true.

I hope this helps! Let me know if you need further clarification or assistance.

لحل المشكلة وإظهار الرسالة “Display this if ng-content is empty!” عندما يكون ng-content فارغًا، يمكنك استخدام الطريقة التالية:

1. إنشاء متغير في الكلاس الخاص بالكومبوننت يُعرف ما إذا كان ng-content فارغًا أم لا.
2. استخدام الدالة ngAfterContentChecked للتحقق من حالة ng-content بعد التحديثات.
3. عرض الرسالة المناسبة استنادًا إلى حالة ng-content.

هنا كيفية تنفيذ ذلك في Angular 2:

typescriptCopy code
import { Component, AfterContentChecked, ContentChild } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterContentChecked {
  @ContentChild('contentWrapper') contentWrapper: any;
  hasContent: boolean = false;

  ngAfterContentChecked() {
    this.hasContent = !!this.contentWrapper.nativeElement.textContent.trim();
  }
}

في هذا المثال، نستخدم @ContentChild('contentWrapper') للوصول إلى ng-content الموجود داخل العنصر div بمساعدة التوصيل بالعنصر contentWrapper، ثم نستخدم دالة ngAfterContentChecked لفحص محتوى ng-content بعد كل تحديث. إذا كان محتوى ng-content فارغًا، سيتم تعيين قيمة hasContent إلى false، وإلا سيتم تعيينها إلى true.

ثم، يمكننا استخدام هذا المتغير hasContent في قالب HTML لعرض الرسالة المناسبة:

htmlCopy code
<div #contentWrapper [hidden]="isOpen">
    <ng-content>ng-content>
div>

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

بهذا الشكل، سيتم عرض الرسالة “Display this if ng-content is empty!” عندما يكون ng-content فارغًا.