Course Progress 91%

Angular Component-Scoped Styles

← Angular Styling Angular Global Styles →

Angular Component-Scoped Styles का मतलब है किसी component की CSS को उसी component तक सीमित रखना। Angular का यह behavior accidental CSS conflicts को रोकता है और large-scale applications में UI को predictable और maintainable बनाता है।

इस chapter में हम detail में समझेंगे कि Angular component-scoped styles कैसे काम करती हैं, internally क्या होता है, और real-world scenarios में इनका सही use कैसे किया जाए।

Component-Scoped Styles क्या होती हैं

Component-scoped styles वे CSS rules होती हैं जो सिर्फ उसी component के template पर apply होती हैं, जहां वे define की गई हैं।

Angular में जब आप component में styles या styleUrls use करते हैं, तो by default ये styles scoped होती हैं।

@Component({
  selector: 'app-card',
  standalone: true,
  template: `
    <div class="card">
      Card Content
    </div>
  `,
  styleUrls: ['./card.component.css']
})
export class CardComponent {}

यहां card.component.css की CSS सिर्फ CardComponent के HTML पर लागू होगी।

Angular Scoped Styling कैसे achieve करता है

Angular scoped styles को achieve करने के लिए View Encapsulation का use करता है।

Internally Angular:

  • Component के HTML elements पर unique attributes add करता है
  • Component की CSS selectors को उन्हीं attributes के साथ rewrite करता है

Example (conceptually):

<div class="card" _ngcontent-abx-c12></div>

.card[_ngcontent-abx-c12] {
  border: 1px solid black;
}

यह process automatically होती है, developer को manually कुछ करने की जरूरत नहीं होती।

Default Encapsulation Mode

Angular का default encapsulation mode होता है:

ViewEncapsulation.Emulated

यह mode browser support के साथ maximum compatibility देता है और most applications के लिए best है।

Component-Level Styling के तरीके

Angular में component-scoped styles define करने के दो main तरीके हैं।

styles array का use

@Component({
  selector: 'app-alert',
  standalone: true,
  template: `<div class="alert">Alert</div>`,
  styles: [`
    .alert {
      color: red;
      font-weight: bold;
    }
  `]
})
export class AlertComponent {}

यह approach छोटे components या quick demos के लिए ठीक है।

styleUrls का use

@Component({
  selector: 'app-alert',
  standalone: true,
  templateUrl: './alert.component.html',
  styleUrls: ['./alert.component.css']
})
export class AlertComponent {}

Real projects में यही approach ज्यादा use होती है।

Scoped Styles और Child Components

Important rule:

Parent component की scoped styles child component के template पर apply नहीं होतीं।

Example:

<!-- parent.component.html -->
<app-child></app-child>

/* parent.component.css */
p {
  color: red;
}

अगर <app-child> के अंदर <p> है, तो parent की CSS उस पर apply नहीं होगी।

यह Angular की style isolation का core benefit है।

Component Root Element Styling

Component के root element को style करने के लिए :host selector use किया जाता है।

:host {
  display: block;
  padding: 10px;
}

यह CSS component के selector element पर apply होती है।

Example DOM:

<app-card></app-card>

:host उसी <app-card> को target करता है।

Conditional Host Styling

Component की state के basis पर host element को style किया जा सकता है।

:host(.active) {
  border: 2px solid green;
}

<app-card class="active"></app-card>

यह pattern reusable UI components के लिए बहुत useful है।

Styling Based on Host Context

Angular :host-context() selector provide करता है, जिससे parent context के आधार पर styling की जा सकती है।

:host-context(.dark-theme) {
  background: #222;
  color: white;
}

अगर component किसी ऐसे parent के अंदर है जहां dark-theme class है, तो यह style apply होगी।

Deep Styling की जरूरत क्यों पड़ती है

कभी-कभी आपको child component के अंदर के elements को style करना पड़ता है, जैसे third-party components।

By default Angular इसे allow नहीं करता।

Angular में इसके लिए historically ये options रहे हैं:

  • ::ng-deep (deprecated but still used)
  • Global styles

Example:

::ng-deep .third-party-class {
  color: red;
}

Important note:
::ng-deep future में remove किया जा सकता है, इसलिए इसका use limited और carefully होना चाहिए।

Component-Scoped Styles के फायदे

  • CSS conflicts नहीं होते
  • Components self-contained बनते हैं
  • Large applications में maintainability बढ़ती है
  • Team collaboration आसान होती है
  • Predictable UI behavior मिलता है

कब Component-Scoped Styles use करें

Best scenarios:

  • Buttons, cards, modals, widgets
  • Reusable UI components
  • Feature-specific UI
  • Isolated layouts

कब Global Styles बेहतर हैं

  • CSS reset
  • Typography rules
  • Theme colors
  • Layout grid systems

Component-scoped styles और global styles का सही balance ही scalable Angular architecture बनाता है।

Common Mistakes

  • हर CSS rule component में डाल देना
  • Parent से child को forcefully style करने की कोशिश
  • Overusing ::ng-deep
  • Styling logic को component logic के साथ mix करना

Angular Component-Scoped Styles Angular की सबसे powerful features में से एक हैं।

← Angular Styling Angular Global Styles →
  • Home