Directive VS Component

Les deux ont l'air de faire la même chose et d'avoir les mêmes attributs :

• Quels sont les cas d'utilisation ?
• Quelles sont les différences ?
• Quand utiliser l'un ou l'autre ?

La réponse simple : Un Component est une Directive avec une vue

Quels sont les cas d'utilisation ?

Directive

        @Directive({
            selector: "[appClick]",
        })
        class ClickDirective {
          @HostListener('mousedown')
          private onMouseDown() {
              console.log('element clicked');
          }
        }
        

Utilisable de cette façon :

        Click me !

        

Component

        @Component({
            selector: "app-click",
            template: `Click me !
            `
        })
        class ClickComponent {
          public click() {
              console.log('element clicked');
          }
        }
        

Utilisable de cette façon :

Quelles sont les différences entre les deux ?

Un Component nécessite une vue, contrairement à une Directive.

Un Component est un bloc UI réutilisable, une Directive est un comportement réutilisable.

Une Directive ajoute ou modifie un comportement à un élément du DOM ou à un Component.

Quand utiliser l'un ou l'autre ?

Component

• pour construire des blocs réutilisables au niveau de l'UI, avec des comportements personnalisés

Directive

• pour créer des comportements réutilisables afin de compléter les éléments/Components déjà disponibles