I Angular spelar attributdirektiv en nyckelroll i att dynamiskt ändra beteendet och utseendet på element utan att modifiera DOM-strukturen. Två av de mest använda attributdirektiven är ngClass och ngStyle. Dessa direktiv erbjuder flexibla sätt att styra elementens stilar och CSS-klasser baserat på komponentens tillstånd.

Vad är ngClass?

Detta är särskilt användbart när du vill ändra utseendet på ett element som svar på dataändringar — till exempel för att markera ett aktivt objekt eller tillämpa stilar baserat på status.

ngClass stöder objektsyntax, strängarrayer och funktioner som returnerar dessa format för att dynamiskt tilldela klasser.

Objektsyntax

Använd ett objekt där nycklarna är klassnamn och värdena är booleska villkor. Om villkoret är true tillämpas klassen.

I det här exemplet läggs klasser till eller tas bort baserat på värdet av egenskapen isActive i komponenten.

Om isActive är true läggs klassen active till och inactive tas bort. Om isActive är false sker det omvända.

Array av strängar

Använd en array där varje sträng representerar ett CSS-klassnamn som kommer att läggas till på elementet. Detta tillvägagångssätt är användbart när du vill applicera flera klasser dynamiskt utan villkor.

Här tillämpas klasserna som anges i arrayen på elementet.

Att använda en array är användbart när du vill tilldela flera klasser dynamiskt – särskilt när antalet klasser kan variera.

Funktion

Använd en funktion som returnerar något av de stödda formaten: ett objekt, en array av strängar eller en enskild sträng. Detta är användbart när de tillämpade klasserna beror på mer komplex logik eller dynamiska villkor.

ngClass kan också ta emot en funktion som returnerar ett objekt, en array eller en sträng beroende på den logik du definierar.

I detta fall returnerar metoden getClass() ett objekt med CSS-klassnamn som nycklar och booleska villkor som värden.

• Om isError är true kommer error-class att tillämpas;
• Om isSuccess är true kommer success-class att tillämpas;
• Om båda är false kommer inga klasser att läggas till.

Vad är ngStyle?

Med ngStyle kan du ändra egenskaper som bakgrundsfärg, typsnitt, storlek, positionering och mer — allt direkt från komponenten.

Hur fungerar ngStyle?

ngStyle accepterar ett objekt där nycklarna är CSS-egenskapsnamn och värdena är uttryck som utvärderas vid rendering.

Om ett uttryck returnerar ett värde, tillämpas det värdet på motsvarande CSS-egenskap för elementet.

Exempel med ett stilobjekt

I detta exempel ändrar vi dynamiskt textfärgen och teckenstorleken för elementet:

Om textColor är red och fontSize är 20px, kommer dessa stilar att tillämpas på elementet. Detta tillvägagångssätt gör det enkelt att kombinera flera stilar i ett uttryck för ökad flexibilitet.

Exempel med variabel och uttryck

Om du behöver tillämpa stilar baserat på logik kan du använda uttryck direkt i mallen:

Om isActive är true kommer bakgrundsfärgen att vara grön; om false blir den röd. Här används en ternär operator för att göra logiken koncis och uttrycksfull.

Exempel med ett dynamiskt värde

Uttryck i ngStyle kan också baseras på metoder. Du kan använda komponentmetoder för att beräkna stilvärden dynamiskt:

I detta exempel returnerar metoden getDynamicStyle() ett stilobjekt baserat på det aktuella värdet av isDarkMode.

Detta är särskilt användbart när stilar beror på externa förhållanden som användarinställningar, tid på dygnet eller app-teman.

När bör du använda ngClass jämfört med ngStyle?

• Använd ngClass när du arbetar med fördefinierade CSS-klasser. Detta är idealiskt när stilar återanvänds på flera ställen och du vill ha centraliserad stilhantering via din stilmall;

• Använd ngStyle när du behöver tillämpa stilar dynamiskt och direkt — till exempel vid inställning av färger, dimensioner eller andra visuella egenskaper som inte är kopplade till återanvändbara klasser.

Genom att använda både ngClass och ngStyle kan du enkelt och effektivt kontrollera utseende och beteende för dina element baserat på komponentdata — utan att behöva uppdatera DOM manuellt.