Angular میں component کیا ہے؟

Question

Accepted Answer

ایک **component** Angular UI کی بنیادی تعمیری اکائی ہے — ایک TypeScript **class** جو `@Component` decorator سے سجی ہوئی ہے اور اسکرین کے ایک حصے (اس کا "view") کو کنٹرول کرتی ہے۔ ہر Angular ایپ components کا ایک درخت ہے۔ ## Component کی ساخت ```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` decorator تین چیزوں کو آپس میں جوڑتا ہے: ایک **selector** (آپ اسے HTML میں کیسے استعمال کرتے ہیں)، ایک **template** (markup)، اور **styles** (اس component کے لیے محدود)۔ ## Class میں منطق اور ڈیٹا ہے ```html

``` Class کی public properties اور methods براہ راست اس کے template میں binding کے ذریعے رسائی کے قابل ہیں — یہ وہ طریقہ ہے جس سے Angular ڈیٹا اور view کو جوڑتا ہے۔ ## Component کو استعمال کرنا ```html ``` ## Styles پہلے سے محدود ہیں ```css /* user-card.css — these styles ONLY affect this component */ h2 { color: blue; } /* won't leak to other components'

s */ ``` Angular خودکار طور پر component styles کو scope کرتا ہے (View Encapsulation)، تاکہ CSS components کے درمیان نہ رساں ہو۔ ## یہ اہم کیوں ہے Components وہ طریقہ ہے جس سے آپ ہر Angular ایپ کو ترتیب دیتے ہیں — template + منطق + محدود styles کی خود مختار اکائیاں، جو ایک درخت میں ترتیب دی جاتی ہیں۔ `@Component` decorator کو سمجھنا (selector، template، styles) اور کس طرح class کی properties/methods template کے ساتھ bind ہوتی ہیں — یہ Angular development کی مطلق بنیاد ہے؛ باقی سب کچھ component model پر بنایا جاتا ہے۔