Angularissa attribuuttidirektiivit ovat keskeisessä roolissa elementtien käyttäytymisen ja ulkoasun dynaamisessa muuttamisessa ilman, että DOM-rakennetta tarvitsee muokata. Kaksi yleisimmin käytettyä attribuuttidirektiiviä ovat ngClass ja ngStyle. Näiden direktiivien avulla voidaan joustavasti hallita elementtien tyylejä ja CSS-luokkia komponentin tilan perusteella.

Mikä on ngClass?

Tämä on erityisen hyödyllistä, kun haluat muuttaa elementin ulkoasua tietojen muuttuessa — esimerkiksi korostaa aktiivista kohdetta tai soveltaa tyylejä tilan perusteella.

ngClass tukee objektisyntaksia, merkkijonotaulukoita sekä funktioita, jotka palauttavat näitä muotoja luokkien dynaamiseen asettamiseen.

Objektisyntaksi

Käytä objektia, jossa avaimet ovat luokkien nimiä ja arvot ovat totuusarvoisia ehtoja. Jos ehto on true, luokka otetaan käyttöön.

Tässä esimerkissä luokkia lisätään tai poistetaan komponentin isActive-ominaisuuden arvon perusteella.

Jos isActive on true, active-luokka lisätään ja inactive poistetaan. Jos isActive on false, tilanne on päinvastainen.

Merkkijonotaulukko

Käytä taulukkoa, jossa jokainen merkkijono edustaa CSS-luokan nimeä, joka lisätään elementtiin. Tämä tapa on hyödyllinen, kun haluat lisätä useita luokkia dynaamisesti ilman ehtoja.

Tässä taulukossa luetellut luokat lisätään elementtiin.

Taulukon käyttö on hyödyllistä, kun haluat määrittää useita luokkia dynaamisesti — erityisesti silloin, kun luokkien määrä voi vaihdella.

Funktio

Käytä funktiota, joka palauttaa minkä tahansa tuetuista muodoista: objektin, merkkijonojen taulukon tai yksittäisen merkkijonon. Tämä on hyödyllistä, kun lisättävät luokat riippuvat monimutkaisemmasta logiikasta tai dynaamisista ehdoista.

ngClass voi myös ottaa vastaan funktion, joka palauttaa objektin, taulukon tai merkkijonon määrittelemäsi logiikan perusteella.

Tässä tapauksessa getClass()-metodi palauttaa objektin, jossa CSS-luokkien nimet ovat avaimina ja totuusarvoehdot arvoina.

• Jos isError on true, error-class lisätään;
• Jos isSuccess on true, success-class lisätään;
• Jos molemmat ovat false, luokkia ei lisätä.

Mikä on ngStyle?

ngStyle-direktiivillä voit muuttaa ominaisuuksia, kuten taustaväriä, fonttia, kokoa, sijaintia ja paljon muuta — suoraan komponentista käsin.

Miten ngStyle toimii?

ngStyle ottaa vastaan olion, jossa avaimet ovat CSS-ominaisuuksien nimiä ja arvot ovat lausekkeita, jotka arvioidaan renderöinnin aikana.

Jos lauseke palauttaa arvon, kyseinen arvo asetetaan elementin vastaavalle CSS-ominaisuudelle.

Esimerkki tyylioliolla

Tässä esimerkissä muutamme dynaamisesti elementin tekstin väriä ja fonttikokoa:

Jos textColor on red ja fontSize on 20px, nämä tyylit lisätään elementtiin. Tämä lähestymistapa mahdollistaa useiden tyylien yhdistämisen yhteen lausekkeeseen, mikä lisää joustavuutta.

Esimerkki muuttujan ja lausekkeen käytöstä

Jos haluat käyttää tyylejä loogisten ehtojen perusteella, voit käyttää lausekkeita suoraan mallissa:

Jos isActive on true, taustaväri on vihreä; jos false, se on punainen. Tässä käytetään ternääristä operaattoria, jotta logiikka on tiivis ja selkeä.

Esimerkki dynaamisella arvolla

Lausekkeet ngStyle-direktiivissä voivat perustua myös metodeihin. Voit käyttää komponentin metodeja lasketaksesi tyylin arvot dynaamisesti:

Tässä esimerkissä getDynamicStyle()-metodi palauttaa tyylin objektina nykyisen isDarkMode-arvon perusteella.

Tämä on erityisen hyödyllistä, kun tyylit riippuvat ulkoisista olosuhteista, kuten käyttäjän asetuksista, vuorokaudenajasta tai sovelluksen teemoista.

Milloin käyttää ngClassia ja milloin ngStylea?

• Käytä ngClass-direktiiviä, kun työskentelet ennalta määriteltyjen CSS-luokkien kanssa. Tämä sopii tilanteisiin, joissa tyylejä käytetään uudelleen useissa paikoissa ja haluat hallita tyylejä keskitetysti tyylitiedoston kautta;

• Käytä ngStyle-direktiiviä, kun sinun täytyy asettaa tyylejä dynaamisesti ja suoraan — esimerkiksi määritellessäsi värejä, mittoja tai muita visuaalisia ominaisuuksia, joita ei ole sidottu uudelleenkäytettäviin luokkiin.

Yhdistämällä ngClass- ja ngStyle-direktiivit voit helposti ja tehokkaasti hallita elementtien ulkoasua ja käyttäytymistä komponentin datan perusteella — ilman, että sinun tarvitsee päivittää DOMia manuaalisesti.