Klasy i style zależne od danych: [class], [style], NgClass, NgStyle

import { Component, signal } from '@angular/core';

@Component({
    selector: 'app-demo',
    imports: [],
    templateUrl: './demo.html'
})
export class Demo {
    readonly ulubione = signal(false);
}

<div class="card m-3 p-3" style="width: 22rem">
  <h5 [class.text-warning]="ulubione()">Turniej retro</h5>
  <button class="btn"
          [class.btn-warning]="ulubione()"
          [class.btn-outline-warning]="!ulubione()"
          (click)="ulubione.set(!ulubione())">
    ★ {{ ulubione() ? 'W ulubionych' : 'Dodaj do ulubionych' }}
  </button>
</div>

import { Component, signal } from '@angular/core';

@Component({
    selector: 'app-demo',
    imports: [],
    templateUrl: './demo.html'
})
export class Demo {
    readonly wolne = signal(6);

    zapisz(): void {
        this.wolne.update(n => (n > 0 ? n - 1 : 0));
    }
}

<div class="p-3">
  <p class="fs-5">
    Wolne miejsca:
    <span class="badge"
          [class]="{
            'text-bg-success': wolne() > 3,
            'text-bg-warning': wolne() > 0 && wolne() <= 3,
            'text-bg-danger': wolne() === 0
          }">
      {{ wolne() }}
    </span>
  </p>
  <button class="btn btn-primary" (click)="zapisz()">Zapisz osobę</button>
</div>

import { Component, signal } from '@angular/core';

@Component({
    selector: 'app-demo',
    imports: [],
    templateUrl: './demo.html'
})
export class Demo {
    readonly rozmiar = signal(24);
    readonly obrot = signal(0);
    readonly kolor = signal('#0d6efd');

    wiekszy(): void {
        this.rozmiar.update(r => Math.min(r + 4, 64));
    }

    mniejszy(): void {
        this.rozmiar.update(r => Math.max(r - 4, 12));
    }

    obroc(): void {
        this.obrot.update(o => (o + 15) % 360);
    }
}

<div class="p-3">
  <div class="mb-3">
    <button class="btn btn-outline-secondary me-1" (click)="mniejszy()">A−</button>
    <button class="btn btn-outline-secondary me-1" (click)="wiekszy()">A+</button>
    <button class="btn btn-outline-secondary me-1" (click)="obroc()">⟳ 15°</button>
    <button class="btn btn-outline-danger" (click)="kolor.set('#dc3545')">Czerwony</button>
  </div>

  <div class="border p-4 text-center" style="width: 26rem">
    <p class="fw-bold mb-0"
       [style.font-size.px]="rozmiar()"
       [style.color]="kolor()"
       [style.transform]="'rotate(' + obrot() + 'deg)'">
      NOC ROBOTÓW
    </p>
  </div>
  <p class="mt-2 text-secondary">rozmiar: {{ rozmiar() }} px, obrót: {{ obrot() }}°</p>
</div>

import { Component, signal } from '@angular/core';
import { NgClass, NgStyle } from '@angular/common';

@Component({
    selector: 'app-demo',
    imports: [NgClass, NgStyle],
    templateUrl: './demo.html'
})
export class Demo {
    readonly progZdania = 50;
    readonly wyniki = signal([
        { uczen: 'Ala', procent: 92 },
        { uczen: 'Bartek', procent: 47 },
        { uczen: 'Celina', procent: 68 },
        { uczen: 'Darek', procent: 31 },
    ]);
}

<div class="p-3">
  <table class="table" style="width: 26rem">
    <thead><tr><th>Uczeń</th><th>Wynik</th></tr></thead>
    <tbody>
    @for (w of wyniki(); track w.uczen) {
      <tr [ngClass]="{
            'table-success': w.procent >= progZdania,
            'table-danger': w.procent < progZdania
          }">
        <td>{{ w.uczen }}</td>
        <td [ngStyle]="{ 'font-weight': w.procent >= 90 ? 'bold' : 'normal' }">{{ w.procent }}%</td>
      </tr>
    }
    </tbody>
  </table>
</div>