Permet d'interagir avec les éléments HTML d'une page en leur attachant un comportement spécifique.

3 type de directives :

1. Les composants

2. Les directives d'attributs, permet d'agir avec les éléments HTML d'une page, en leur attachant un comportement spécifique. (ngClass, ngStyle)

3. Les directives structurelles (ex : ngIf, ngfor )

   

On utilise l'annotation @HostListener pour gérer les interactions de l'utilisateur au sein d'une directive.

//exemple de directive : 
@Directive({
//les elements avec cet attribut beneficieront de la directive
  selector: '[pkmnBorderCard]' 
})
export class BorderCardDirective {
	constructor(private el: ElementRef) {
		this.setBorder('#f5f5f5');
		this.setHeight(180);
	}
	//rajouter des eventListeners
	@HostListener("mouseenter") onMouseEnter() {
		this.setBorder("#009688");
	}
	@HostListener("mouseleave") onMouseLeave() {
		this.setBorder("#f5f5f5");
	}
 
	private setBorder(color: string) {
		let border = 'solid 4px ' + color;
		this.el.nativeElement.style.border = border;
	}

	private setHeight(height: number) {
		this.el.nativeElement.style.height = height + 'px';
	}
}

NgModel directive :

Le rôle principal de la directive NgModel est de mettre en place une liaison de données bi-directionnelle pour chacun des champs du formulaire sur lequel elle est appliquée. C'est à dire qu'un changement dans la vue se répercutera sur le composant et vice versa ce qui n'est pas le cas normalement.

En plus, la directive s'occupe aussi d'ajouter et de retirer des classes pour chacun des champs du formulaire : ng-touched, ng-valid, ng-pristine, ng-dirty etc ... Ainsi, vous pouvez savoir si l'utilisateur a cliqué ou non sur un champ, si la valeur du champ a changé, ou s'il est devenu invalide. En fonction de ces informations, on peut changer l'apparence d'un champ, faire apparaître un message d'erreur ou de confirmation, etc ...

• CREER DIRECTIVE STRUCTURELLE

PASSWORD VALIDATOR DIRECTIVE

import { Directive } from '@angular/core';
import { AbstractControl,ValidationErrors, AsyncValidator, AsyncValidatorFn, NG_ASYNC_VALIDATORS } from '@angular/forms';
import { Observable } from 'rxjs';
import { UserService } from 'projects/common/src/lib/user-module/services/user.service';
import { map } from 'rxjs/operators';

@Directive({
  selector: '[passwordValidator]',
  providers: [{provide: NG_ASYNC_VALIDATORS , useExisting: PasswordValidatorDirective, multi: true}]
})
export class PasswordValidatorDirective implements AsyncValidator {
  validate(control: AbstractControl): Promise<ValidationErrors> | Observable<ValidationErrors> {
    return  PasswordValidatorFn(this.userService)(control);
  }

  constructor(private userService : UserService) { }

}

export function PasswordValidatorFn(userService : UserService) : AsyncValidatorFn {
  return (control: AbstractControl): Observable<ValidationErrors> => {
    return  userService.doValidatePassword(control.value).pipe(
      map(response => {
        return response.status!==200?{invalidpwd:true}:null;
      }));
  };
}

LOGIN PASSWORD VALIDATOR DIRECTIVE

import { Directive } from '@angular/core';
import { NG_VALIDATORS, ValidationErrors,   ValidatorFn, Validator, FormGroup } from '@angular/forms';

@Directive({
  selector: '[loginPwdValidator]',
  providers: [{provide: NG_VALIDATORS , useExisting: LoginPwdValidatorDirective, multi: true}]
})
export class LoginPwdValidatorDirective implements Validator {

  validate(formGroup: FormGroup): ValidationErrors {
    return  LoginPwdValidatorFn()(formGroup);
  }

  constructor() { }

}

function LoginPwdValidatorFn() : ValidatorFn {
  return (formGroup: FormGroup): ValidationErrors => {
    const pwd=formGroup.get('inputPassword3');
    const newpwd=formGroup.get('inputPassword4');
    const newpwdconf=formGroup.get('inputPassword5');
    let l_diffpwd=newpwd!==null&&(pwd.value===newpwd.value);
    let l_pwdconf=newpwdconf!==null&&newpwd!==null&&(newpwdconf.value!==newpwd.value);
    if (l_diffpwd||l_pwdconf) {
      let lresult : any= {};
      if (l_diffpwd) {
        lresult.diffpwd=l_diffpwd;
      }
      if (l_pwdconf) {
        lresult.pwdconf=l_pwdconf;
      }      
      return lresult;      
    }

  };
}