@Directive v/s @Component in Angular
Директивы добавляют поведение к существующим DOM элементам или компонентам Angular
import { Directive, HostListener } from '@angular/core';
@Directive({
selector: "[logOnClick]"
})
class LogOnClick {
@HostListener('click')
onClick() { console.log('Element clicked!'); }
}Использование:
<button logOnClick>I log when clicked!</button>Компоненты создают новые DOM-элементы с определённым поведением, реализованным в классе компонента. Имеют шаблоны (templates).
import { Component, Input } from '@angular/core';
@Component({
selector: 'card',
template: `<h1>{{name}}</h1>`
})
class ContactCard {
@Input() name: string
}Использоваение:
<card [name]="'foo'"></card>