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

مقدمة في توجيهات السمات المدمجة (NgClass, NgStyle)

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

14. توجيهات السمات المدمجة (NgClass, NgStyle)

توجيهات Angular (directives) هي فئات تضيف سلوكاً إضافياً للعناصر في التطبيق. توجيهات السمات تغير مظهر العنصر أو سلوكه.

ما هو توجيه السمة؟

تبدو توجيهات السمات وتتصرف مثل سمات HTML القياسية (مثل ngModel, NgClass). يتم ربطها باستخدام صيغة ربط الخاصية [ ].

1. NgClass

يقوم NgClass ديناميكياً بإضافة أو إزالة فئات CSS بناءً على حالة المكون أو تعبير منطقي.

الصيغة 1: كائن مفتاح-قيمة (Key-Value Object)

استخدم كائناً يكون فيه المفتاح هو اسم الفئة (string) والقيمة هي تعبير منطقي.

typescript export class StatusComponent { isUrgent: boolean = true; isError: boolean = false; }

html

Status Message

الصيغة 2: مصفوفة بأسماء الفئات

typescript classList: string[] = ['highlight', 'border-red'];

html

Multiple Classes

2. NgStyle

يقوم NgStyle ديناميكياً بتعيين الأنماط الداخلية (inline styles) لعنصر HTML.

typescript currentSize: number = 24;

html

Styled Text

ملاحظة: عند تعيين قيم البكسل، يمكنك استخدام 'font-size' (سلسلة نصية) أو 'font-size.px' (سلسلة نصية مع لاحقة الوحدة).