Course Progress 88%

Angular Styling

← Angular Dynamic Components Component-Scoped Styles →

Angular Styling का मतलब है Angular application में CSS को सही तरीके से apply करना, manage करना और control करना। Angular में styling सिर्फ “CSS लिख देना” नहीं है, बल्कि यह decide करना भी है कि कौन-सी style global होगी, कौन-सी component तक limited रहेगी, और Angular का rendering engine styles को कैसे handle करता है।

इस chapter में हम Angular (modern Angular, not AngularJS) में styling के सभी core concepts detail में समझेंगे।

Angular में Styling कैसे काम करती है

Angular में styles तीन main levels पर apply की जा सकती हैं:

  • Inline styles
  • Component-level styles
  • Global styles

Angular का default behavior component-based styling को encourage करता है ताकि styles एक component से दूसरे component में leak न हों।

Inline Styling in Angular

Inline styling सबसे basic तरीका है, जहां HTML element के अंदर ही style define की जाती है।

<p style="color: red; font-size: 18px;">
  This is inline styled text
</p>

Angular में inline styles normal HTML की तरह ही work करती हैं, लेकिन maintainability के लिहाज से यह recommended नहीं है।

Property Binding के साथ Dynamic Styles

Angular में styles को dynamically change करने के लिए property binding use की जाती है।

<p [style.color]="textColor">
  Dynamic color text
</p>

textColor = 'blue';

यह approach तब useful होती है जब style value runtime पर change होती है।

Multiple Styles Bind करना

Multiple CSS properties एक साथ bind की जा सकती हैं।

<p [style]="{ color: 'green', fontSize: '20px' }">
  Multiple styles applied
</p>

यह syntax small cases के लिए ठीक है, लेकिन complex styling के लिए scalable नहीं है।

CSS Classes के साथ Styling

Angular में styling का सबसे common और clean तरीका CSS classes use करना है।

<p class="highlight">
  Styled using CSS class
</p>

Component या global CSS file में class define की जाती है।

.highlight {
  color: purple;
  font-weight: bold;
}

Dynamic Class Binding

Angular में classes को dynamically add या remove किया जा सकता है।

<p [class.active]="isActive">
  Conditional class
</p>

isActive = true;

अगर isActive true है, तो active class apply होगी।

ngClass Directive

Multiple classes conditionally apply करने के लिए ngClass use किया जाता है।

<p [ngClass]="{ active: isActive, error: hasError }">
  ngClass example
</p>

isActive = true;
hasError = false;

यह approach complex UI states handle करने के लिए बहुत useful है।

Component Styles (styles / styleUrls)

Angular component में styles define करने के दो तरीके हैं:

Inline styles in Component

@Component({
  selector: 'app-box',
  standalone: true,
  template: `<div class="box">Box</div>`,
  styles: [`
    .box {
      padding: 10px;
      border: 1px solid black;
    }
  `]
})
export class BoxComponent {}

External CSS file use करना

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

External file approach ज्यादा readable और maintainable होती है।

Angular Style Encapsulation (Intro)

By default Angular component styles encapsulated होती हैं।
मतलब एक component की CSS दूसरे component को affect नहीं करती।

Angular internally elements पर special attributes add करता है।

.box {
  color: red;
}

यह CSS सिर्फ उसी component के template में apply होगी।

Encapsulation को detail में हम अगले chapter में cover करेंगे।

Global Styling in Angular

Application-wide styles के लिए global stylesheet use की जाती है।

Angular project में normally यह file होती है:

  • styles.css
    या
  • styles.scss
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

Global styles हर component पर apply होती हैं।

Component Style vs Global Style

Difference समझना बहुत जरूरी है:

  • Component styles → isolated, safe, reusable
  • Global styles → layout, typography, theme level rules

Best practice यह है कि:

  • Layout, reset, typography → global
  • UI component styling → component level

Host Element Styling

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

:host {
  display: block;
  border: 1px solid gray;
}

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

Conditional Styling with State

Angular components में state के basis पर styling बहुत common है।

<div [class.selected]="isSelected">
  Item
</div>

isSelected = false;

State change होते ही UI automatically update हो जाता है।

Inline Style vs Class Based Styling

Comparison:

  • Inline style → quick but hard to maintain
  • Class based → clean, reusable, scalable

Real projects में हमेशा class-based styling prefer करनी चाहिए।

Angular Styling में Common Mistakes

कुछ common गलतियां जो beginners करते हैं:

  • हर चीज global CSS में डाल देना
  • Inline styles का ज्यादा use
  • Encapsulation को समझे बिना override करना
  • Reusable classes create न करना

Angular Styling का सही Use Case

Angular styling सही तरीके से use करने पर benefits:

  • Clean UI architecture
  • No CSS conflicts
  • Easy maintenance
  • Better scalability
  • Predictable behavior

Angular styling system simple दिखता है, लेकिन इसके पीछे powerful concepts हैं। अगले chapters में हम component-scoped styles, encapsulation और animations को deep level पर समझेंगे।

← Angular Dynamic Components Component-Scoped Styles →
  • Home