Angular Academy · Lektion

Dynamiske classes og styles

Bind classes og styles reaktivt.

Lektion 4 af 413 trin

Dynamiske classes og styles er en gratis Angular Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Angular Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Angular Academy-kurset indeholder 4 lektioner i alt.

Dynamisk typografering i skabeloner

Angular giver dig mulighed for at binde klasser og inline-typografier til komponentens tilstand, så brugergrænsefladen opdateres automatisk, når data ændres.

Binding af en enkelt klasse

Brug [class.name] til at slå én CSS-klasse til eller fra ud fra et boolesk udtryk.

<div [class.active]="isActive">Item</div>

// component
isActive = true;

Flere klasser med ngClass

ngClass anvender flere klasser på én gang ved hjælp af et objekt med klassenavne, der er knyttet til booleske værdier.

<div [ngClass]="{ active: isActive, disabled: isDisabled }">
  Item
</div>

ngClass med arrays og strenge

ngClass accepterer også en streng med klassenavne eller et array.

<div [ngClass]="'box highlighted'"></div>
<div [ngClass]="['box', 'rounded']"></div>

Binding af en enkelt typografi

Brug [style.property] til at binde én inline-CSS-egenskab til en værdi.

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

// component
textColor = "tomato";

Typografibindinger med enheder

Tilføj et enhedssuffiks for at binde numeriske værdier med enheder som pixel eller procent.

<div [style.width.px]="boxWidth"></div>
<div [style.height.%]="boxHeight"></div>

// component
boxWidth = 200;
boxHeight = 50;

Flere typografier med ngStyle

ngStyle angiver flere inline-typografier på én gang ud fra et objekt.

<div [ngStyle]="{ color: textColor, 'font-size.px': size }">
  Styled
</div>

Klassebinding vinder ved sammenstød

Når statiske og bundne klasser overlapper, fletter Angular dem; bindingen styrer, om den dynamiske klasse er til stede, uden at fjerne de statiske klasser.

<div class="card" [class.active]="isActive"></div>
<!-- card always present; active toggles -->

Reaktion på tilstand

Bindinger evalueres igen under ændringsdetektering, så en opdatering af en egenskab på komponenten straks typograferer elementet på ny.

toggle() {
  this.isActive = !this.isActive;
}

Valg mellem klasse og typografi

Foretræk klassebindinger med CSS-regler af hensyn til vedligeholdelse; gem direkte typografibindinger til værdier, der virkelig er dynamiske, som en beregnet bredde eller farve.

Med signaler

Klasse- og typografibindinger fungerer også med signaler; du skal blot kalde signalet i skabelonudtrykket.

<div [class.active]="isActive()"></div>

// component
isActive = signal(true);

Hurtigt tjek

Test din forståelse af dynamiske klasser og typografier.

Besvar den i den interaktive lektion

Opsummering

Slå én klasse til eller fra med [class.name] eller flere med ngClass; angiv én typografi med [style.prop] (med en valgfri enhed) eller flere med ngStyle. Bindinger reagerer automatisk på tilstanden, herunder signaler.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 38
Lektioner: 144

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Dynamiske classes og styles” gratis?

Ja — alle 3 lektioner i læringssporet Angular Academy, inklusive “Dynamiske classes og styles”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Angular Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Dynamiske classes og styles”?

Bind classes og styles reaktivt. Du øver dig i Angular Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Angular Academy?

Der kræves ingen tidligere erfaring. Angular Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.

Hvor lang tid tager lektionen “Dynamiske classes og styles”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Angular Academy-lektion?

Ja. Alle Angular Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Angular Academy