استایل دهی (Styling)

استایل دهی انگولار یعنی کنترل ظاهر با «بایندینگ (Binding)» کلاس و استایل، و CSS مخصوص هر کامپوننت. بنابراین کد تمیز می ماند و تغییر تم ساده می شود. بایندینگ یعنی وصل کردن داده به ویژگی های DOM.

اصول استایل دهی انگولار

برای کلاس ها از [class.foo] و [ngClass] استفاده کن. برای استایل ها از [style.prop] و [ngStyle] کمک بگیر. همچنین کپسوله سازی، CSS را داخل همان کامپوننت نگه می دارد.

<div [class.active]="isActive" [ngClass]="{ big: big }" [style.color]="color" [ngStyle]="{ padding: pad + 'px' }">...</div>

مشاهده در ادیتور

استایل دهی پایه

برای یک تغییر بولی، [class.foo] کافی است. اما برای چند کلاس، [ngClass] بهتر است. همچنین، مقدارهای پویا مثل رنگ را با [style.*] ببند.

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  styles: [`
    .box { padding: 12px; border: 2px solid #ccc; margin-top: 8px; border-radius: 6px; }
    .highlight { background: #fffa8b; }
    .big { font-size: 24px; }
    .toolbar button { margin-right: 6px; }
  `],
  template: `
    <h3>Styling</h3>
    <div class="toolbar">
      <button (click)="toggleHighlight()">Toggle Highlight</button>
      <button (click)="toggleBig()">Toggle Big</button>
      <button (click)="setColor('crimson')">Crimson</button>
      <button (click)="setColor('seagreen')">Green</button>
      <button (click)="setColor('royalblue')">Blue</button>
    </div>

    <div class="box"
      [class.highlight]="highlight"
      [ngClass]="{ big: big }"
      [style.color]="color"
      [style.borderColor]="color">
      Styled box
    </div>
  `
})
export class App {
  highlight = false;
  big = false;
  color = 'royalblue';

  toggleHighlight(): void {
    this.highlight = !this.highlight;
  }
  toggleBig(): void {
    this.big = !this.big;
  }
  setColor(c: string): void {
    this.color = c;
  }
}

bootstrapApplication(App);

مشاهده در ادیتور

نکته: کلاس ها را ترجیح بده. سپس تغییرات تکی را با [style.*] انجام بده.

استایل دهی پویا

با ورودی ها، رنگ و اندازه را زنده عوض کن. بنابراین [ngClass] برای کلاس های متغیر و [ngStyle] برای چند ویژگی هم زمان عالی است.

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, FormsModule],
  styles: [`
    .box { border: 2px solid #ccc; margin-top: 12px; border-radius: 6px; transition: all .15s ease-in-out; }
    .fancy { box-shadow: 0 2px 8px rgba(0,0,0,.15); background: #f9fbff; }
    .rounded { border-radius: 14px; }
    .toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
    .toolbar label { display: inline-flex; align-items: center; gap: 6px; }
  `],
  template: `
    <h3>Dynamic Styling</h3>

    <div class="toolbar">
      <label><input type="checkbox" [(ngModel)]="fancy"> Fancy</label>
      <label><input type="checkbox" [(ngModel)]="rounded"> Rounded</label>
      <label>Color <input type="color" [(ngModel)]="color"></label>
      <label>Padding <input type="range" min="0" max="40" [(ngModel)]="padding"> {{ padding }}px</label>
      <label>Font Size <input type="range" min="12" max="36" [(ngModel)]="fontSize"> {{ fontSize }}px</label>
    </div>

    <div class="box"
      [ngClass]="{ fancy: fancy, rounded: rounded }"
      [ngStyle]="{
        color: color,
        borderColor: color,
        padding: padding + 'px',
        fontSize: fontSize + 'px'
      }">
      Styled box
    </div>
  `
})
export class App {
  fancy = true;
  rounded = false;
  color = '#4169e1';
  padding = 12;
  fontSize = 18;
}

bootstrapApplication(App);

مشاهده در ادیتور

نکته: شی های بزرگ ngStyle سخت نگهداری می شوند. سپس بیشتر را به کلاس ها بسپار.

کپسوله سازی و :host

کپسوله سازی یعنی CSS هر کامپوننت، همان جا اثر کند. بنابراین از :host برای ریشه کامپوننت و از :host-context() برای واکنش به تم والد استفاده کن.

:host { display: block; }
:host(.dense) { padding: 8px; }
:host-context(.theme-dark) { color: #eee; }

مشاهده در ادیتور

تم دهی با متغیرهای CSS

متغیر CSS مثل سطل رنگ نام دار است. سپس با عوض کردن کلاس، سطل ها را جابه جا کن. در نتیجه تم و اکسنت، فوری تغییر می کنند.

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  styles: [`
    :host { --bg: #ffffff; --fg: #222; --accent: #4169e1; }
    .theme-dark { --bg: #121212; --fg: #eaeaea; --accent: #4f8cff; }
    .toolbar { display: flex; gap: 8px; align-items: center; }
    .swatch { width: 18px; height: 18px; border-radius: 50%; border: 1px solid #ccc; display: inline-block; vertical-align: middle; }
    .box { margin-top: 10px; padding: 14px; border-radius: 8px; border: 2px solid var(--accent); background: var(--bg); color: var(--fg); transition: all .15s ease-in-out; }
    button { padding: 6px 10px; }
  `],
  template: `
    <h3>Theme with CSS Variables</h3>
    <div [class.theme-dark]="dark" class="toolbar">
      <button (click)="dark = !dark">Toggle {{ dark ? 'Light' : 'Dark' }}</button>
      <button (click)="setAccent('#e91e63')">Pink</button>
      <button (click)="setAccent('#00b894')">Green</button>
      <button (click)="setAccent('#ff9800')">Orange</button>
      <span class="swatch" [style.background]="accent"></span>
    </div>

    <div class="box" [style.--accent]="accent">
      This box follows the current theme and accent color.
    </div>
  `
})
export class App {
  dark = false;
  accent = '#4169e1';

  setAccent(c: string): void {
    this.accent = c;
  }
}

bootstrapApplication(App);

مشاهده در ادیتور

هشدار: رنگ ها را هاردکد نکن. سپس از متغیرها استفاده کن تا تم ها انعطاف پذیر باشند.

گام های عملی سریع

1. کلاس ها را با [class] یا [ngClass] وصل کن.
2. مقدارهای پویا را با [style.*] یا [ngStyle] ببند.
3. CSS را در سطح کامپوننت نگه دار.
4. تم را با متغیرهای CSS عوض کن.

جمع بندی سریع

• استایل دهی انگولار با بایندینگ ها قدرتمند است.
• کلاس ها قابل نگهداری تر از استایل های خطی هستند.
• کپسوله سازی از تداخل CSS جلوگیری می کند.
• متغیرهای CSS، تم دهی را ساده می کنند.

مسیر بعدی: قلاب های چرخه حیات و کلاینت HTTP. همچنین استایل دهی انگولار را به عنوان کلید تم دهی نگه دار.