Angular component کیا ہے?

Question

Accepted Answer

ایک **component** ایک Angular UI کا بنیادی تعمیر کا بلاک ہے — ایک TypeScript **class** جو `@Component` سے سجایا ہوا ہے اور اسکرین کے ایک حصے (اس کا "view") کو کنٹرول کرتا ہے۔ ہر Angular ایپ components کا ایک tree ہے۔ ## 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** (نشانات)، اور **styles** (اس component تک محدود)۔ ## Class logic اور ڈیٹا رکھتا ہے ```html

``` Class کی عوامی خصوصیات اور طریقے براہ راست اس کے template میں binding کے ذریعے قابل رسائی ہیں — یہ ہے کہ Angular ڈیٹا اور view کو کیسے جوڑتا ہے۔ ## ایک component استعمال کریں ```html ``` ## Styles ڈیفالٹ کے ذریعے encapsulated ہیں ```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 + logic + scoped styles کی خود مختار یونٹیں، ایک tree میں composed۔ `@Component` decorator (selector, template, styles) کو سمجھنا اور یہ کہ class کی خصوصیات/طریقے template سے کیسے bind ہوتے ہیں، Angular development کی مکمل بنیاد ہے؛ باقی سب کچھ component model پر بنتا ہے۔