View Encapsulation એક ઘટકની CSS કેવી રીતે scope કરવામાં આવે તે નિયંત્રિત કરે છે — ડિફોલ્ટ રીતે, Angular દરેક ઘટકની શૈલીઓને અલગ કરે છે જેથી તેઓ બહાર ન નીકળે અથવા અન્ય ઘટકો દ્વારા અસર પામે નહીં. આ CSS ની વૈશ્વિક-scope સમસ્યાને ઉકેલે છે.
({
: ,
: ,
: [],
})
{}
ડિફોલ્ટ Emulated મોડ સાથે, તે h2 { color: blue } અન્ય ઘટકોમાં <h2>s ને અસર કરશે નહીં, અને બાહ્ય શૈલીઓ આમાં ચરાશે નહીં.
<!-- 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 ની જરૂર વિના scoped શૈલીઓનો અનુકરણ કરે છે.
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 ઇરાદાપૂર્વક અપવાદો માટે) સમજવું મોટા એપ્લિકેશનમાં શૈલીઓ સંચાલિત કરવા અને ઘટક લાઇબ્રેરી બનાવવા માટે મહત્વપૂર્ણ છે જ્યાં શૈલી અચલન એક ગંભીર સમસ્યા હશે.