Comment s’attacher à des composants HTML de la page et interagir avec eux ? C’est grâce aux directives que vous allez pouvoir le faire dans Angular.
Chaque directive a un sélecteur css (enfin comme si c’était un sélecteur css).
Trois types de directive :
- Les composants (Component)
- Les directives d’attribut
- Les directives structurelles (comme ngIf, ou ngFor)
A noter que la déclaration de la directive a une importance.
Si on met : selector : ‘[unselector]’, il s’agit d’une directive d’attribut, si l’on met : selector : ‘unselector’, c’est comme si c’était un composant (cela s’applique partout, et pas que pour les attributs).
Toujours importer et déclarer la directive dans le Module
Pour que la directive soit reconnue par l’application Angular, vous devez l’import et la référencer dans le module :
import { HighlightDirective } from ‘./highlight.directive’;
@NgModule({
imports: [
BrowserModule
],
declarations: [
AppComponent,
HighlightDirective
],
bootstrap: [
AppComponent//moduleracineaudémarrage
]
})
export class AppModule {
}
Les directives d’attribut
La création d’une directive se fait grâce au générateur du angular CLI : ng generate directive highLight.
Il va créer une classe TypeScript : avec l’attribut de classe : @Directive :
@Directive({
selector: ‘[appHighlight]’ // app{name} to stop confusing between this selector and a true css selector, don’t use ng{name} !
})
NOTE: on peut même affiner notre sélecteur : @Directive({selector: ‘button[counting]’}). Voulant dire : tous les boutons qui ont le selecteur counting (<button counting />)
En important en plus ElementRef :
import { ElementRef, Directive } from ‘@angular/core’;
On peut profiter de l’accès dès le constructeur à l’élément où est la directive dans le DOM.
Ainsi, nous pouvons très rapidement appliquer le principe DRY, et dire que tous les éléments du DOM qui auront la directive appHightLight changeront leur couleur de fond en jaune :
element.nativeElement.style.backgroundColor = ‘yellow’;
Ecouter les événements du DOM
Pour écouter les événements sur l’élement, nous allons rajouter un attribut, qui sera un attribut de méthode : HostListener.
Nous importons l’attribut qui va décorer nos méthodes :
import { ElementRef, Directive, HostListener } from ‘@angular/core’;
Ce qui va nous permettre de nous attacher aux événements :
@HostListener(« mouseleave »)
onMouseLeave() {
this._element.nativeElement.style.border = « inherit »;
}
Passons maintenant à la personnalisation de notre directive
Grâce au décorateur Input, nous allons pouvoir rendre paramétrable un attribut de la classe de la directive. Et donc, nous pourrons renseigner cette valeur depuis le html de la Vue.
@Input() // if we need to change the name @Input(‘newName’)
borderColor: string;
Ici borderColor devient une propriété qui va être paramétrable côté HTML.
<div appHighlight borderColor= »green » *ngFor= »let oneClone of clones » class= »row » >
Super, on a déjà bien avancé sur un outil bien pratique pour appliquer des comportements, du style à chacun de nos contrôles DOM.
Prochaine étape : on va organiser nos routes, pour avoir plusieurs pages.