Angular میں View Encapsulation کیا ہے؟

Question

Accepted Answer

**View Encapsulation** ایک component کے CSS کو کیسے scoped کیا جائے اس پر کنٹرول کرتا ہے — ڈیفالٹ طور پر، Angular **ہر component کے styles کو isolate کرتا ہے** تاکہ وہ دوسرے components میں نہ پھیلیں یا وہاں سے متاثر نہ ہوں۔ یہ CSS کے global-scope مسئلے کو حل کرتا ہے۔ ## ڈیفالٹ: Emulated encapsulation ```ts @Component({ selector: "app-card", template: `

Title

`, styles: [`h2 { color: blue; }`], // ONLY affects this component's

// encapsulation: ViewEncapsulation.Emulated (the default — no need to specify) }) export class CardComponent {} ``` ڈیفالٹ `Emulated` mode کے ساتھ، وہ `h2 { color: blue }` دوسرے components میں `

`s کو متاثر نہیں کرے گا، اور باہر کے styles اس میں داخل نہیں ہوں گے۔ ## Emulated کیسے کام کرتا ہے ```html
Title
``` Angular خودکار طور پر component کے عناصر میں منفرد `_ngcontent`/`_nghost` attributes شامل کرتا ہے اور اپنے CSS selectors کو صرف ان سے match کرنے کے لیے دوبارہ لکھتا ہے — native Shadow DOM کی ضرورت کے بغیر scoped styles کو emulate کرتا ہے۔ ## تینوں modes ```text ViewEncapsulation.Emulated (default) → scoped via added attributes (works everywhere) ViewEncapsulation.ShadowDom → real browser Shadow DOM (true isolation) ViewEncapsulation.None → NO scoping — styles are global (leak everywhere) ``` ## Encapsulation کو ضرورت پڑنے پر pierce کریں ```css /* style a child component's internals from the parent / :host { display: block; } / the component's own host element / :host(.active) { ... } / host with a class / ::ng-deep .child-class { color: red; } / pierce into children (use sparingly — deprecated-ish) */ ``` `:host` component کے اپنے root element کو style کرتا ہے؛ `::ng-deep` ایک style کو descendants میں force کرتا ہے (طاقتور لیکن مشروط ہے — یہ encapsulation کو توڑتا ہے)۔ ## اہم کیوں ہے View Encapsulation اس وجہ سے ہے کہ Angular components الگ تھلگ style کرنے کے لیے محفوظ ہیں — آپ ایک component میں `h2 { color: blue }` لکھ سکتے ہیں بغیر app میں ہر `

` کو خراب کرنے کی فکر کیے۔ ڈیفالٹ `Emulated` mode کو سمجھنا (اور `None`/`ShadowDom` متبادل، ساتھ ہی `:host` اور `::ng-deep` intentional exceptions کے لیے) بڑی apps میں styles کو manage کرنے اور component libraries بنانے کے لیے اہم ہے جہاں style leakage ایک سنگین مسئلہ ہوتا۔