View Encapsulation একটি কম্পোনেন্টের CSS কীভাবে স্কোপ করা হয় তা নিয়ন্ত্রণ করে — ডিফল্টভাবে, Angular প্রতিটি কম্পোনেন্টের স্টাইল আলাদা করে যাতে সেগুলি অন্য কম্পোনেন্টে ছড়িয়ে না পড়ে বা প্রভাবিত না হয়। এটি CSS এর গ্লোবাল-স্কোপ সমস্যার সমাধান করে।
({
: ,
: ,
: [],
})
{}
ডিফল্ট Emulated মোডে, সেই h2 { color: blue } অন্যান্য কম্পোনেন্টের <h2> গুলিকে প্রভাবিত করবে না, এবং বাইরের স্টাইলগুলি এতে প্রবেश করবে না।
<!-- Angular adds unique attributes to scope the styles -->
<app-card _nghost-abc>
<h2 _ngcontent-abc>Title</h2>
</app-card>
<style>h2[_ngcontent-abc] { color: blue; }</style> <!-- scoped by attribute -->
Angular স্বয়ংক্রিয়ভাবে কম্পোনেন্টের উপাদানগুলিতে অনন্য _ngcontent/_nghost অ্যাট্রিবিউট যোগ করে এবং এর CSS নির্বাচকগুলি পুনর্লিখন করে শুধুমাত্র সেগুলি মেলাতে — নেটিভ Shadow DOM এর প্রয়োজন ছাড়াই স্কোপ করা স্টাইলগুলি অনুকরণ করে।
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)
/* 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 } লিখতে পারেন অ্যাপের প্রতিটি <h2> নষ্ট করার বিষয়ে চিন্তা না করে।
ডিফল্ট Emulated মোড বোঝা (এবং None/ShadowDom বিকল্পগুলি, সাথে ইচ্ছাকৃত ব্যতিক্রমের জন্য :host এবং ::ng-deep) বড় অ্যাপ্লিকেশনে স্টাইল পরিচালনার জন্য এবং কম্পোনেন্ট লাইব্রেরি তৈরির জন্য গুরুত্বপূর্ণ যেখানে স্টাইল লিক একটি গুরুতর সমস্যা হবে।
বিস্তারিত উত্তরসহ IT ইন্টারভিউ প্রশ্নের একটি লাইব্রেরি — জুনিয়র থেকে সিনিয়র পর্যন্ত।
দান করুন