Как в ANGUlAR 5-8 монтировать компоненты через теги HTML?

В Angular 5-8 для монтирования компонентов через теги HTML используется механизм директив. Директивы - это классы, которые добавляют к элементу интерактивное поведение и внешний вид. Есть два типа директив: компоненты и атрибутивные директивы.

1. Для создания компонентов в Angular используется декоратор @Component. Он применяется к классу компонента и содержит информацию о его шаблоне, стилях, селекторе и метаданных компонента. Включение компонента через тег HTML возможно с помощью соответствующего селектора.

Например, вот простой компонент:

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

   @Component({
     selector: 'app-my-component',
     template: '<h1>Привет, мир!</h1>',
   })
   export class MyComponent {}

Чтобы использовать этот компонент внутри другого компонента или в шаблоне другого компонента, просто поместите его тег в нужное место:

   <app-my-component></app-my-component>

Теперь компонент будет отображаться в этом месте.

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

   <button appCustomDirective>Нажми меня</button>

Для создания атрибутивной директивы в Angular нужно использовать декоратор @Directive. Директива должна содержать хотя бы одно из двух: selector или host. Selector указывает на то, к чему должна быть применена директива, а host может использоваться для привязки к элементу при помощи CSS-селектора.

Например, предположим, что у нас есть следующая атрибутивная директива:

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

   @Directive({
     selector: '[appCustomDirective]'
   })
   export class CustomDirective {
     constructor(el: ElementRef) {
     el.nativeElement.style.backgroundColor = 'yellow';
     }
   }

В данном случае мы меняем фоновый цвет элемента при помощи атрибутивной директивы appCustomDirective.

Важно помнить, что компоненты могут использоваться только с помощью селектора в виде тега, а атрибутивные директивы могут применяться только к существующим элементам с помощью атрибута.