I Angular spelar attributdirektiv en nyckelroll i att dynamiskt ändra beteende och utseende 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 genom 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 gäller 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ärg och teckenstorlek för elementet:

Om textColor är red och fontSize är 20px, kommer dessa stilar att tillämpas på elementet. Detta tillvägagångssätt möjliggör enkel kombination av flera stilar i ett uttryck för ökad flexibilitet.

Exempel med variabel och uttryck

För att tillämpa stilar baserat på logik kan uttryck användas direkt i mallen:

Om isActive är true blir bakgrundsfärgen grön; om false blir den röd. Här används en ternär operator för att göra logiken kortfattad 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 appens 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 styra utseendet och beteendet hos dina element baserat på komponentdata — allt utan att behöva uppdatera DOM manuellt.