I Angular spiller attributdirektiver en central rolle i dynamisk at ændre adfærd og udseende af elementer uden at ændre DOM-strukturen. To af de mest anvendte attributdirektiver er ngClass og ngStyle. Disse direktiver giver fleksible muligheder for at kontrollere elementers stilarter og CSS-klasser baseret på komponentens tilstand.

Hvad er ngClass?

Dette er særligt nyttigt, når du ønsker at ændre udseendet af et element som reaktion på dataændringer — for eksempel fremhævelse af et aktivt element eller anvendelse af stilarter baseret på status.

ngClass understøtter objektsyntaks, arrays af strenge og funktioner, der returnerer disse formater til dynamisk anvendelse af klasser.

Objektsyntaks

Brug et objekt, hvor nøglerne er klassenavne og værdierne er booleske betingelser. Hvis betingelsen er true, anvendes klassen.

I dette eksempel tilføjes eller fjernes klasser baseret på værdien af isActive-egenskaben i komponenten.

Hvis isActive er true, tilføjes klassen active, og inactive fjernes. Hvis isActive er false, sker det modsatte.

Array af strenge

Brug et array, hvor hver streng repræsenterer et CSS-klassenavn, der vil blive tilføjet til elementet. Denne tilgang er nyttig, når du vil anvende flere klasser dynamisk uden betingelser.

Her anvendes de klasser, der er angivet i arrayet, på elementet.

Brug af et array er nyttigt, når du ønsker at tildele flere klasser dynamisk — især når antallet af klasser kan variere.

Funktion

Brug en funktion, der returnerer et af de understøttede formater: et objekt, et array af strenge eller en enkelt streng. Dette er nyttigt, når de anvendte klasser afhænger af mere kompleks logik eller dynamiske betingelser.

ngClass kan også modtage en funktion, der returnerer et objekt, array eller streng afhængigt af den logik, du definerer.

I dette tilfælde returnerer getClass()-metoden et objekt med CSS-klassenavne som nøgler og booleske betingelser som værdier.

• Hvis isError er true, anvendes error-class;
• Hvis isSuccess er true, anvendes success-class;
• Hvis begge er false, tilføjes ingen klasser.

Hvad er ngStyle?

Med ngStyle kan du ændre egenskaber som baggrundsfarve, skrifttype, størrelse, placering og mere — alt sammen direkte fra komponenten.

Hvordan fungerer ngStyle?

ngStyle accepterer et objekt, hvor nøglerne er CSS-egenskabsnavne, og værdierne er udtryk, der evalueres under rendering.

Hvis et udtryk returnerer en værdi, anvendes denne værdi på det tilsvarende CSS-egenskab for elementet.

Eksempel med et style-objekt

I dette eksempel ændrer vi dynamisk tekstfarven og skriftstørrelsen på elementet:

Hvis textColor er red og fontSize er 20px, vil disse stilarter blive anvendt på elementet. Denne tilgang gør det nemt at kombinere flere stilarter i ét udtryk for større fleksibilitet.

Eksempel med variabel og udtryk

Hvis du har behov for at anvende styles baseret på logik, kan du bruge udtryk direkte i skabelonen:

Hvis isActive er true, vil baggrundsfarven være grøn; hvis false, vil den være rød. Her bruges en ternær operator for at gøre logikken kortfattet og udtryksfuld.

Eksempel med en dynamisk værdi

Udtryk i ngStyle kan også baseres på metoder. Du kan bruge komponentmetoder til at beregne stilværdier dynamisk:

I dette eksempel returnerer metoden getDynamicStyle() et stilobjekt baseret på den aktuelle værdi af isDarkMode.

Dette er særligt nyttigt, når stilarter afhænger af eksterne forhold som brugerpræferencer, tidspunkt på dagen eller app-temaer.

Hvornår bør du bruge ngClass vs ngStyle?

• Brug ngClass, når du arbejder med foruddefinerede CSS-klasser. Dette er ideelt, når stilarter genbruges flere steder, og du ønsker centraliseret styring af stilarter via dit stylesheet;

• Brug ngStyle, når du har behov for at anvende stilarter dynamisk og direkte — for eksempel ved angivelse af farver, dimensioner eller andre visuelle egenskaber, der ikke er knyttet til genanvendelige klasser.

Ved at bruge både ngClass og ngStyle kan du nemt og effektivt styre udseende og adfærd for dine elementer baseret på komponentdata — alt sammen uden manuelt at skulle opdatere DOM'en.