I Angular spiller attributtdirektiver en sentral rolle i å endre oppførsel og utseende til elementer dynamisk, uten å endre strukturen i DOM-en. To av de mest brukte attributtdirektivene er ngClass og ngStyle. Disse direktivene gir fleksible måter å kontrollere stil og CSS-klasser på elementer basert på komponentens tilstand.

Hva er ngClass?

Dette er spesielt nyttig når du ønsker å endre utseendet til et element som respons på endringer i data — for eksempel ved å fremheve et aktivt element eller bruke stiler basert på status.

ngClass støtter objektsyntaks, arrayer av strenger og funksjoner som returnerer disse formatene for å tildele klasser dynamisk.

Objektsyntaks

Bruk et objekt der nøklene er klassenavn og verdiene er boolske betingelser. Hvis betingelsen er true, blir klassen brukt.

I dette eksemplet blir klasser lagt til eller fjernet basert på verdien til isActive-egenskapen i komponenten.

Hvis isActive er true, blir active-klassen lagt til og inactive fjernet. Hvis isActive er false, er det motsatt.

Array av strenger

Bruk et array der hver streng representerer et CSS-klassenavn som vil bli lagt til elementet. Denne tilnærmingen er nyttig når du ønsker å bruke flere klasser dynamisk uten betingelser.

Her blir klassene som er oppført i arrayen, brukt på elementet.

Å bruke en array er nyttig når du ønsker å tildele flere klasser dynamisk – spesielt når antallet klasser kan variere.

Funksjon

Bruk en funksjon som returnerer et av de støttede formatene: et objekt, et array av strenger, eller en enkelt streng. Dette er nyttig når de brukte klassene avhenger av mer kompleks logikk eller dynamiske betingelser.

ngClass kan også motta en funksjon som returnerer et objekt, en liste eller en streng, avhengig av logikken du definerer.

I dette tilfellet returnerer getClass()-metoden et objekt med CSS-klassenavn som nøkler og boolske betingelser som verdier.

• Hvis isError er true, vil error-class bli brukt;
• Hvis isSuccess er true, vil success-class bli brukt;
• Hvis begge er false, vil ingen klasser bli lagt til.

Hva er ngStyle?

Med ngStyle kan du endre egenskaper som bakgrunnsfarge, skrifttype, størrelse, posisjonering og mer — alt direkte fra komponenten.

Hvordan fungerer ngStyle?

ngStyle godtar et objekt der nøklene er CSS-egenskapsnavn og verdiene er uttrykk som evalueres under gjengivelsen.

Hvis et uttrykk returnerer en verdi, blir denne verdien brukt på den tilsvarende CSS-egenskapen til elementet.

Eksempel med et stilobjekt

I dette eksemplet endrer vi dynamisk tekstfargen og skriftstørrelsen til elementet:

Hvis textColor er red og fontSize er 20px, vil disse stilene bli brukt på elementet. Denne tilnærmingen gjør det enkelt å kombinere flere stiler i ett uttrykk for økt fleksibilitet.

Eksempel med variabel og uttrykk

Hvis du trenger å bruke stiler basert på logikk, kan du bruke uttrykk direkte i malen:

Hvis isActive er true, vil bakgrunnsfargen være grønn; hvis false, vil den være rød. Her brukes en ternær operator for å gjøre logikken kortfattet og uttrykksfull.

Eksempel med en dynamisk verdi

Uttrykk i ngStyle kan også baseres på metoder. Du kan bruke komponentmetoder for å beregne stilverdier dynamisk:

I dette eksemplet returnerer metoden getDynamicStyle() et stilobjekt basert på den nåværende verdien av isDarkMode.

Dette er spesielt nyttig når stiler avhenger av eksterne forhold som brukerpreferanser, tid på døgnet eller app-temaer.

Når bør du bruke ngClass vs ngStyle?

• Bruk ngClass når du arbeider med forhåndsdefinerte CSS-klasser. Dette er ideelt når stiler gjenbrukes flere steder og du ønsker sentralisert stilkontroll gjennom stilarket ditt;

• Bruk ngStyle når du trenger å bruke stiler dynamisk og direkte – for eksempel når du setter farger, dimensjoner eller andre visuelle egenskaper som ikke er knyttet til gjenbrukbare klasser.

Ved å bruke både ngClass og ngStyle kan du enkelt og effektivt kontrollere utseendet og oppførselen til elementene dine basert på komponentdata – alt uten å måtte oppdatere DOM manuelt.