8. تعمق في المكونات (Components)

المكونات هي اللبنات الأساسية لواجهات مستخدم Angular. يتحكم المكون في قسم من الشاشة، أو عرض (view)، ويتعامل مع تفاعلات المستخدم لذلك العرض.

هيكل المكون

يتكون كل مكون من ثلاثة أجزاء:

1. الفئة (.ts): تحتوي على البيانات (الخصائص) والمنطق (الأساليب).
2. القالب (.html): يحدد هيكل واجهة المستخدم للمكون.
3. البيانات الوصفية (@Component): يقوم بتهيئة المكون، وربط الفئة بالقالب والمُحدِّد (selector).

إنشاء مكون جديد عبر CLI

bash ng generate component user-profile // أو اختصار ng g c user-profile

يولد هذا الأمر أربعة ملفات:

• user-profile.component.ts
• user-profile.component.html
• user-profile.component.css
• user-profile.component.spec.ts (للاختبار)

كما يقوم تلقائياً بتحديث أقرب وحدة NgModule (AppModule) عن طريق إضافة UserProfileComponent إلى مصفوفة declarations.

مثال على البيانات الوصفية للمكون

typescript import { Component } from '@angular/core';

@Component({ selector: 'app-user-profile', // كيفية استخدام المكون في HTML templateUrl: './user-profile.component.html', // رابط العرض styleUrls: ['./user-profile.component.css'] // رابط الأنماط الخاصة بالمكون }) export class UserProfileComponent { userName: string = 'Alex Johnson'; isActive: boolean = true;

toggleStatus(): void { this.isActive = !this.isActive; } }

لاستخدام هذا المكون، ما عليك سوى وضع وسم المُحدِّد الخاص به في قالب مكون آخر:

html

Application Dashboard