Angular est-il vraiment plus compliqué que React ?

Quand on débute avec Angular, il est facile de se sentir découragé face à la multitude de concepts à assimiler. Cette complexité peut inciter à se tourner vers des frameworks comme React, qui semblent plus simples à première vue. Mais est-ce vraiment le cas ?

Abonnez-vous à notre chaîne

Pour profiter des prochaines vidéos sur Angular, abonnez-vous à la nouvelle chaîne YouTube !

Skip to content

Vous souhaitez recevoir de l'aide sur ce sujet ? rejoignez la communauté Angular.fr sur Discord.

Personnaliser des directives

Une directive permet de changer l'état d'un élément du DOM. Par exemple, nous pourrions afficher une bulle sur un élément ayant l'attribut tooltip: <div tooltip></div>.

Très utile, car nous avons juste à utiliser l'attribut tooltip dans notre projet pour afficher une infobulle.

Créer une directive

Créons une simple directive où le but est d'afficher une boite de dialogue lorsqu'on clique sur un bouton.

html
<button alert>Supprimer</button>

La directive est la suivante :

ts
import {Directive, HostListener} from '@angular/core';

@Directive({
  selector: `[alert]`,
  standalone: true
})
export class AlertDirective {
  @HostListener('click', ['$event'])
  run(event: Event) {
    alert('Hello World')
  }
}

Nous avons besoin du décorateur Directive pour indiquer que nous classe est un directive. Cette directive a une propriété selector indiquant les selecteurs CSS concerné par cette directive

Attention ! Le nom peut être trompeur. Nous parlons bien d'un selecteur CSS ici ! Ainsi, nous avons des crochets : [alert] pour indiquer que nous souhaitons prendre les éléments ayant l'attribut alert. Vous l'auriez compris, si nous souhaitons prendre les éléments ayant la classe alert, nous aurions mis .alert.

Nous utilisons ensuite le décorateur @HostListener pour indiquer que la méthode en-dessous (run()) est éxécutée au clique. Dans le tableau, nous indiquons le paramètre $event : l'événement du clic récupérable dans la méthode run()

Avec une valeur en entrée :

Maintenant, je souhaite passer une valeur en entrée dans ma directive :

html
<button alert="Hello World"></button>

Nous utiliserons le décorateur Input comme les composants :

ts
import { Directive, HostListener, Input } from '@angular/core';

@Directive({
  selector: `[alert]`,
  standalone: true
})
export class AlertDirective {
  @Input('alert') text = '';

  @HostListener('click', ['$event'])
  run(event: Event) {
    alert(this.text)
  }
}

Puisque le nom alert est déjà utilisé pour le nom de la directive, nous le faisons passer en paramètre du décorateur Input.

Avec d'autres paramètres

Admettons que nous souhaitons avoir ceci :

html
<button alert="Hello World" [go]="clickFn"></button>

clickFn est une fonction de notre composant à appeler quand on clique le sur bouton.

ts
import { Directive, HostListener, Input } from '@angular/core';

@Directive({
  selector: `[alert]`,
  standalone: true
})
export class AlertDirective {
  @Input('alert') text = '';
  @Input() go: Function = () => {};

  @HostListener('click', ['$event'])
  run(event: Event) {
    alert(this.text)
    this.go();
  }
}

Le principe est équivalent à un composant. Nous indiquons la proprété en entrée. Ici, c'est une fonction. Lorsque la méthode run() est exécutée, on déclenche la fonction go()

Chaque mois, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !