Components

Одним из ключевых элементов приложения являются компоненты. Компонент управляет отображением представления на экране.

В нас уже есть AppComponent .

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

Все компоненты имею аналогичную структуру. Мы определяем логику приложения компонента внутри класса. К этому классу мы добавили @Component, декоратор TypeScript, который позволяет вам модифицировать определение класса или функции и добавляет метаданные к свойствам и аргументам функций

• selector - свойство элемента, которое мы используем, чтобы сказать Angular о создании и вставке экземпляра этого компонента.
• template / templateUrl- это форма HTML, которая сообщает Angular о том, что нужно отображать в DOM

Нам нужно импортировать Component декаратор из @angular/core, прежде чем мы сможем его использовать. Чтобы использовать этот компонент, мы просто добавляем <app-root></app-root> в HTML файл или в другой шаблон, и Angular добавит экземпляр представления AppComponent между этими тегами.

AppComponent уже добавлен в src/index.html .

Создадим новый компонент и выведем текст на экран (TodoListComponent)

Добавляем новый компонент в модуль declarations