Sono di 3 categorie:
Attributo: alterano la visualizzazione degli elementi del DOM. Le più comuni sono:
ngClass aggiunge o rimuove la classe di un elemento.
ngStyle applica dello stile in linea.
ngModel Usato per i form permette il passaggio dei dati da html a ts e viceversa. (vedi 2 way binding)
N.B.Per fare in modo che funzioni nel file ts bisogna importare CommonModule
Testo da evidenziare premendo il pulsante.
Il pulsante cambia il valore booleano della variabile evidenziato Il testo si trova nel tag p nel quale viene inserito la direttiva ngClass con due classi (giallo e nogiallo), che sono configurate nel file css, e assegna una o l'altra a seconda del valore della variabile.
codice:<p [ngClass]="{ 'giallo' : evidenziato, 'nogiallo' : !evidenziato}">
Premendo il pulsante ngStyle la direttiva ngStyle, inserita nel tag p di questo testo, cambia il colore dello stesso.
IL valore della variabile colore inizialmente uguale a nero viene cambiato in marrone.
codice:
<p [ngStyle]="{'color' : colore}">
Sono direttive che si possono applicare su ogni componente, si creano con il comando ng g d nome_direttiva viene cosi creato il file nome_direttiva.directive.ts nel quale si scriverà il codice come sotto indicato.
Lo scopo del seguente esempio è di inserire uno sfondo verde quando il mouse entra in questo paragrafo ed eliminarlo quando esce.
Da terminale si crea la direttiva.
ng g d sfondoverde e nel suo costruttore, tramite constructor(private el: ElementRef) {} indico che la variabile el tramite ElementRef permette di accedere agli elementi del DOM.
Ora bisogna intercettare i due eventi di ingresso e uscita del mouse: questo è possibile tramite il decoratore @HostListener('nome_evento') Quindi con @HostListener('mouseenter') ingressoMouse(){
this.el.nativeElement.style.backgroundColor = 'lightgreen';} imposto il colore di sfondo, mentre con @HostListener('mouseleave') uscitaMouse() {
this.el.nativeElement.style.backgroundColor = 'transparent';} lo elimino.
Ora nei componenti dove si vuole applicare la direttiva creata si deve:
Nel file ts : importare il la direttiva con import { SfondoverdeDirective } from '../sfondoverde.directive'; ed inserire nel campo imports del decoratore ComponentSfondoverdeDirective
Infine nel file html nel/nei tag interssato/i basta inserire il selettore della direttiva creata: <p appSfondoverde>