العودة إلى الدورة

توجيهات الهيكلة المدمجة: *NgIf

مطور Angular الشامل: من الصفر إلى الاحتراف

15. توجيهات الهيكلة المدمجة: *NgIf

توجيهات الهيكلة هي المسؤولة عن تشكيل أو إعادة تشكيل هيكل DOM، عادةً عن طريق إضافة أو إزالة أو معالجة العناصر. يتم دائماً إلحاقها بعلامة نجمية (*).

توجيه *NgIf

يقوم *NgIf بإضافة أو إزالة عنصر وشجرته الفرعية من DOM بشكل شرطي بناءً على تعبير منطقي.

ملاحظة مهمة: لا يقوم *NgIf بإخفاء العنصر فقط (مثل CSS display: none)؛ بل يزيل العنصر فعلياً من DOM، مما يوفر الموارد ويمنع الأخطاء المحتملة.

العرض الشرطي البسيط

فئة المكون:

typescript export class AuthComponent { isLoggedIn: boolean = false; }

القالب:

html <button (click)="isLoggedIn = !isLoggedIn"> Toggle Login Status </button>

<!-- عرض رسالة الترحيب فقط إذا كانت isLoggedIn صحيحة --> <div *ngIf="isLoggedIn"> <h2>Welcome back, user!</h2> </div> <!-- عرض مطالبة تسجيل الدخول فقط إذا كانت isLoggedIn خاطئة --> <div *ngIf="!isLoggedIn"> <p>Please log in to continue.</p> </div>

استخدام *NgIf مع else (Ng-Template)

يوفر Angular آلية لتحديد قالب بديل عندما يكون الشرط الأساسي خاطئاً باستخدام الكلمة المفتاحية else وعنصر <ng-template>.

html

<div *ngIf="isLoggedIn; else loadingOrError"> Content Loaded Successfully. </div> <!-- يتم عرض ng-template فقط إذا كانت isLoggedIn خاطئة -->

<ng-template #loadingOrError>

<p>Loading or Authentication failed...</p> </ng-template>

ملاحظة: لا يتم عرض <ng-template> نفسه أبداً؛ إنها طريقة لتجميع المحتوى الذي يستخدمه Angular برمجياً.