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

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

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

html

<ng-template #loadingOrError>

Loading or Authentication failed...

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