Разница между @Component и @Directive в Angular

Какая разница между директивами и компонентами в ангуларе? Этот вопрос мучает многих фронт-энд разработчиков, изучающих Angular и на начальных этапах это, не совсем ясно, когда их использовать.

@Directive

Обычно директивы — это маленькие куски кода, которые добавляют функциональность к существующему элементу DOM. Они очень похожи на компоненты, но только не обладают шаблоном. Директива должна иметь селектор, чтобы привязать свою функциональность к элементу на странице. Например:

import { Directive } from '@angular/core';

@Directive({
  selector: '[consoleLog]'
})
export class consoleLogDirective {
  constructor() {
    //Вывод строки в консоль.
    console.log('Это директива');
  }
}

В HTML это будут выглядеть вот так:

<p consoleLog>Я простой параграф!</p>

В данном примере селектором служит атрибут. Селектор может быть по элементу или классу, или комбинацией всех.

@Component

Во фреймворке класс Component наследуется от класса Directive, поэтому можно сказать, что компоненты, это те же директивы, но с дополнительными возможностями. Компонент не привязывается к элементам DOM, а вместо этого создает свою собственную иерархию элементов и с ней работает. Например:

import { Component } from '@angular/core';

@Directive({
  selector: '[simpleParagraph]',
  template: `<p>Я простой параграф!</p>`
})
export class simpleParagraphComponent {
  constructor() {
    //Вывод строки в консоль.
    console.log('Это компонент');
  }
}

Например, в вашем SPA, компонент вставляется как:

<simpleParagraph></simpleParagraph>

Как видно, что компонент, очень похож на предыдущую директиву. Разница в декораторе и его свойствах. Тут свойство selector несколько отличается, оно задает имя для тега, который используется для вставки данного компонента в другой. А дополнительное свойство template, задает шаблон для вставки. Вместо template, можно использовать templateUrl и использовать ссылку на внешний HTML файл.

Итак, со сходством и разницей компонентов и директивами в Angular разобрались. Когда же их использовать? Все очень просто. Если нужно вставить большой кусок HTML со своей логикой и функциональностью нужно использовать компонент, если нежно добавить только функциональность к уже существующим элементам, то – директивы.