Angular এ View Encapsulation কি?

Question

Accepted Answer

**View Encapsulation** একটি কম্পোনেন্টের CSS কীভাবে স্কোপ করা হয় তা নিয়ন্ত্রণ করে — ডিফল্টভাবে, Angular **প্রতিটি কম্পোনেন্টের স্টাইল আলাদা করে** যাতে সেগুলি অন্য কম্পোনেন্টে ছড়িয়ে না পড়ে বা প্রভাবিত না হয়। এটি CSS এর গ্লোবাল-স্কোপ সমস্যার সমাধান করে। ## ডিফল্ট: 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` মোডে, সেই `h2 { color: blue }` অন্যান্য কম্পোনেন্টের `

` গুলিকে প্রভাবিত করবে না, এবং বাইরের স্টাইলগুলি এতে প্রবেश করবে না। ## Emulated কীভাবে পর্দার পিছনে কাজ করে ```html
Title
``` Angular স্বয়ংক্রিয়ভাবে কম্পোনেন্টের উপাদানগুলিতে অনন্য `_ngcontent`/`_nghost` অ্যাট্রিবিউট যোগ করে এবং এর CSS নির্বাচকগুলি পুনর্লিখন করে শুধুমাত্র সেগুলি মেলাতে — নেটিভ Shadow DOM এর প্রয়োজন ছাড়াই স্কোপ করা স্টাইলগুলি অনুকরণ করে। ## তিনটি মোড ```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 ভেদ করা ```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` কম্পোনেন্টের নিজস্ব রুট উপাদান স্টাইল করে; `::ng-deep` বংশধরদের মধ্যে একটি স্টাইল চালায় (শক্তিশালী কিন্তু নিরুৎসাহিত — এটি encapsulation ভাঙে)। ## কেন এটি গুরুত্বপূর্ণ View Encapsulation হল কারণ যে Angular কম্পোনেন্টগুলি আলাদাভাবে স্টাইল করার জন্য নিরাপদ — আপনি একটি কম্পোনেন্টে `h2 { color: blue }` লিখতে পারেন অ্যাপের প্রতিটি `

` নষ্ট করার বিষয়ে চিন্তা না করে। ডিফল্ট `Emulated` মোড বোঝা (এবং `None`/`ShadowDom` বিকল্পগুলি, সাথে ইচ্ছাকৃত ব্যতিক্রমের জন্য `:host` এবং `::ng-deep`) বড় অ্যাপ্লিকেশনে স্টাইল পরিচালনার জন্য এবং কম্পোনেন্ট লাইব্রেরি তৈরির জন্য গুরুত্বপূর্ণ যেখানে স্টাইল লিক একটি গুরুতর সমস্যা হবে।