Компонент Angular - обособленная часть интерфейса со своей логикой, HTML-шаблоном и стилями, представленная в виде класса, объявлению которого предшествует декоратор ``@Component().``

ng generate component home

ng g c home

ng generate component --spec=false

Начнем сразу с примера создания компонента Angular.

home.component.ts

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
 
  constructor() { }
 
  ngOnInit(): void {
  }
 
}

Для использования созданного компонента в приложении сначала его необходимо указать в модуле, в пределах которого он определен, в свойстве declarations.
app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
 
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
 
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Инициализация компонента осуществляется через использование значения свойства selector в качестве элемента в нужном месте шаблона.
app.component.html

    <div>
      <app-home></app-home>
    </div>

Свойства класса компонента могут использоваться для отображения данных в шаблоне. Для этого используется механизм интерполяции. А вызов методов может осуществляться при возникновении событий.

Параметры компонента задаются с помощью передаваемого декоратору конфигурационного объекта следующей структуры:

• selector - уникальный для каждого компонента CSS-селектор, с помощью которого компонент инициализируется в шаблоне;
• template - визуальная часть компонента, представленная HTML-разметкой в виде строки;
• templateUrl - URL-адрес файла, содержащего HTML-разметку;
• styles - стили, распространяемые только на HTML текущего компонента;
• styleUrls - массив URL-адресов файлов стилей;
• inputs - определяет массив входных свойств;
• outputs - задает массив выходных свойств;
• animations - описывает анимации компонента;
• encapsulation - определяет с помощью перечисления ViewEncapsulation пределы распространения стилей;
• changeDetection - устаналивает режим работы механизма отслеживания изменений;
• providers - задает массив локальных в пределах компонента Angular Providers;
• viewProviders - определяет Angular Providers, которые доступны не только текущему компоненту, но и всем его дочерним представлениям;
• interpolation - переопределяет открывающий и закрывающие символы интерполяции;
• preserveWhitespaces - логическое значение, если true - сохраняет в шаблоне все лишние символы пробела, в противном случае удаляет их (по умолчанию false).;

При переопределении символов интерполяции свойству interpolation передается массив с двумя элементами, первый из которых задает открывающий символ, а второй - закрывающий символ.

 @Component({
      ...
      interpolation: ['!!', '!!']
    })

вызов компонента с помощью тега

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-car',
  template: `
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, nesciunt.</p>
  ` 
})

<app-car></app-car>

вызов с помощью аттрибута

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: '[app-car]',
  template: `
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, nesciunt.</p>
  ` 
})

<div app-car></div>

вызов в классе

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: '.app-car',
  template: `
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, nesciunt.</p>
  ` 
})

<div class='app-car'><div>

С помощью свойства template. Шаблон представляет кусок разметки HTML с вкраплениями кода Angular. Фактически шаблон это и есть представление, которое увидит пользователь при работе с приложением.

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-car',
  template: `
    <h2>Single Car</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, nesciunt.</p>
  `,
})
export class CarComponent implements OnInit {
 
  constructor() { }
 
  ngOnInit() {
  }
 
}

Каждый компонент должен иметь один шаблон. Однако необязательно определять шаблон напрямую с помощью свойства template. Можно вынести шаблон во внешний файл с разметкой html, а для его подключения использовать свойство templateUrl.

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-car',
  templateUrl: './car.component.html',
 
})
export class CarComponent implements OnInit {
 
  constructor() { }
 
  ngOnInit() {
  }
 
}

Стилизация компонента может производиться как с помощью установки стилей в самом компоненте, так и с помощью подключения внешних css-файлов.

Для установки стилей в директиве @Component определено свойство styles:

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-car',
  template: `
    <h2>Single Car</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, nesciunt.</p>
  `,
  // styleUrls: ['./car.component.css']
  styles: [`
    h2 {
      color: aqua;
    }
  `] 
})
export class CarComponent implements OnInit {
 
  constructor() { }
 
  ngOnInit() {
  }
 
}

Под инкапсуляцией стилей компонента понимается определение пределов распространения его стилей на другие шаблоны.

Правило инкапсуляции задается с помощью перечисления ``ViewEncapsulation``, который входит в состав модуля

@angular/core и имеет следующие значения:

• ViewEncapsulation.Emulated - используется по умолчанию и указывает, что стили действуют только в пределах текущего компонента;
• ViewEncapsulation.None - объявленные для компонента стили распространяются на все приложение без ограничений;
• ViewEncapsulation.ShadowDom - создает для компонента элемент ShadowRoot и инкапсулирует стили в нем.

Пример использования ViewEncapsulation.

   import {ViewEncapsulation} from '@angular/core';
 
    @Component({
      ...
      encapsulation: ViewEncapsulation.None
    })

Геттерами и сеттерами называются методы Angular компонента, которые используются для модификации значений его свойств.

Getter вызывается в момент обращения к свойству (в шаблоне или в других методах классах), setter - в момент присвоения ему значения, обычно это свойства с декоратором @Input().

@Input() _name: string = null;
 
get name(): string { return this._name || 'Unknown'; }

Запись означает, что при обращении к свойству с именем name будет вызван одноименный метод с ключевым словом get.

Setter создается с помощью set. Он не должен возвращать значений и обязательно принимает в качестве единственного аргумента исходное значение.

    @Component({
      selector: 'contacts-list',
      template: `<contacts-item [name] = " 'Peter' "></contacts-item>`
    })
 
    export class ContactsListComponent {
      contactPerson: string;
    }

    @Component({
      selector: 'contacts-item',
      template: `<p>{{name}}</p>`
    })
 
    export class ContactsItemComponent {
      _name: string = null;
 
      @Input() set name(value: string) { this._name = value + '*'; }
 
      get name(): string { return this._name || 'Unknown'; }
    }

В компоненте ContactsItemComponent определено строковое свойство _name, которое участвует в формировании name.

В ContactsListComponent задается значение name компонента ContactsItemComponent. Именно в этот момент вызывается метод set() и устанавливает значение в «Peter*».

В самом компоненте после интерполяции вызывается метод get(), который возвращает «Unknown», если _name равно null.

То есть если бы в ContactsListComponent шаблон был <contacts-item></contacts-item>, то значением name было бы «Unknown».