Как создать и зарегистрировать компонент в Angular?

Создание и регистрация компонента в Angular

Компонент — это основной строительный блок Angular-приложения. Он управляет частью пользовательского интерфейса и содержит логику для отображения данных и обработки событий. Чтобы создать компонент, используется декоратор @Component, который добавляет метаданные, такие как селектор, шаблон и стили.

Процесс создания

Для создания компонента вручную нужно определить класс и применить к нему декоратор @Component. Например:

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

@Component({
  selector: 'app-example',
  template: '<h1>Hello, Angular!</h1>',
  styles: ['h1 { color: blue; }']
})
export class ExampleComponent { }

Здесь selector определяет, как компонент будет использоваться в HTML (например, <app-example></app-example>), template задает разметку, а styles — стили.

Регистрация в модуле

После создания компонент необходимо зарегистрировать в Angular-модуле (NgModule). Это делается в массиве declarations:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ExampleComponent } from './example.component';

@NgModule({
  declarations: [
    ExampleComponent
  ],
  imports: [
    BrowserModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Без регистрации в declarations компонент не будет доступен для использования в шаблонах других компонентов этого модуля. Если компонент используется в другом модуле, его нужно экспортировать через exports.

Вывод

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