ما هي مكونات Angular؟

Question

Accepted Answer

**المكون** (component) هو اللبنة الأساسية لواجهة المستخدم في Angular — وهو **class** من TypeScript مزين بـ `@Component` يتحكم في جزء من الشاشة ("عرضه"). كل تطبيق Angular عبارة عن شجرة من المكونات. ## تشريح المكون ```ts import { Component } from "@angular/core"; @Component({ selector: "app-user-card", // the custom HTML tag: templateUrl: "./user-card.html", // the view (or inline `template: '...'`) styleUrls: ["./user-card.css"], // scoped styles for this component }) export class UserCardComponent { name = "Ann"; // properties → available in the template greet() { return `Hi ${this.name}`; } // methods → callable from the template } ``` مُزخرف `@Component` يربط ثلاثة أشياء معاً: **selector** (كيفية استخدامه في HTML)، **template** (الترميز)، و**styles** (مرتبطة بهذا المكون). ## يحتوي الـ class على المنطق والبيانات ```html

``` خصائص ومethods عامة في الـ class يمكن الوصول إليها مباشرة في template عبر binding — هذا هو جوهر كيفية ربط Angular للبيانات والعرض. ## استخدام المكون ```html ``` ## الأنماط مُغلفة بشكل افتراضي ```css /* user-card.css — these styles ONLY affect this component */ h2 { color: blue; } /* won't leak to other components'

s */ ``` يقوم Angular بتحديد نطاق أنماط المكون تلقائياً (View Encapsulation)، لذا لا ينسكب CSS بين المكونات. ## لماذا يهم المكونات هي كيفية بناء كل تطبيق Angular — وحدات مستقلة من template + منطق + أنماط مرتبطة، مكونة في شجرة. فهم مُزخرف `@Component` (selector، template، styles) وكيفية ربط خصائص/methods الـ class بـ template هو الأساس المطلق لتطوير Angular؛ كل شيء آخر يُبنى على نموذج المكون.