17. توجيهات الهيكلة المدمجة: *NgSwitch

*NgSwitch هي طريقة Angular لتنفيذ العرض الشرطي بناءً على قيم محتملة متعددة، على غرار عبارة switch في JavaScript.

يزيل العناصر من DOM تماماً مثل *NgIf.

ثلاثية توجيهات NgSwitch

1. [ngSwitch]: يُطبق على عنصر الحاوية. يحدد التعبير الذي سيتم تقييم قيمته.
2. *ngSwitchCase: يُطبق على العناصر داخل الحاوية. يعرض العنصر إذا كانت قيمته مطابقة لتعبير [ngSwitch].
3. *ngSwitchDefault: يُطبق على عنصر داخل الحاوية. يُعرض إذا لم يتم استيفاء أي من شروط *ngSwitchCase.

مثال على *NgSwitch

فئة المكون:

typescript export class NotificationComponent { userRole: string = 'admin'; // 'guest', 'user', or 'admin'

promoteToAdmin() { this.userRole = 'admin'; } }

القالب:

html <button (click)="promoteToAdmin()">Promote

يُعد *NgSwitch أكثر وضوحاً وغالباً ما يكون أكثر كفاءة في الأداء من تسلسل عبارات *NgIf/else المتعددة، خاصة عند المقارنة مع متغير واحد.