@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>

Похожие записи

Переиспользуемые анимации в Angular

Для создания анимации используется функция animation(). Для её использования — useAnimation(). Приводится пример переиспользуемой анимации, а также создание анимации через литерал объекта.

09 октября 2018 г. в Angular

Angular & MVVM

  • Model - just file like user.class.ts
  • View - HTML template of component
  • ViewModel - Typescript part of a component
14 апреля 2019 г. в Angular

Вложенные формы Angular

Рассматриваются варианты встраивания форм, позволяющие переиспользовать набор полей вводе со своей логикой. @Input() родительской формы, @Output() дочерней формы, ViewChild(), ControlValueAccessor, ControlContainer