Component

Since:		Angular 14（2022）

A component is the fundamental building block of an Angular application. It pairs a TypeScript class with an HTML template to define the UI and logic for a part of the screen. Components are defined using the @Component decorator, and every Angular application has at least one root component (typically AppComponent). Components can be nested hierarchically to compose complex UIs.

Syntax

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

@Component({
  selector: 'app-example',       // Custom HTML tag name
  templateUrl: './example.component.html', // External template file
  styleUrls: ['./example.component.css'],  // External style file
  standalone: true,              // Standalone component (Angular 14+)
})
export class ExampleComponent {
  title = 'Hello, Angular!';
}

@Component Decorator Options

Option	Overview
`selector`	The custom HTML element tag used to include this component in other templates. Typically prefixed with `app-`.
`template`	Inline HTML template string. Use instead of `templateUrl` for simple components.
`templateUrl`	Path to an external HTML template file.
`styles`	Array of inline CSS strings.
`styleUrls`	Array of paths to external CSS files.
`standalone`	When `true`, the component manages its own dependencies without an NgModule (Angular 14+).
`imports`	In standalone components, lists the directives, pipes, and other components this component depends on.
`providers`	Services provided at the component scope (a new instance per component).
`changeDetection`	Change detection strategy. Default is `ChangeDetectionStrategy.Default`; set to `OnPush` for performance optimization.

Sample Code

A standalone user card component that displays profile information received via @Input.

// user-card.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-user-card',
  template: `
    <div class="card">
      <h2>{{ name }}</h2>
      <p>Role: {{ role }}</p>
    </div>
  `,
  standalone: true,
})
export class UserCardComponent {
  @Input() name = '';
  @Input() role = '';
}

// app.component.ts
import { Component } from '@angular/core';
import { UserCardComponent } from './user-card.component';

@Component({
  selector: 'app-root',
  template: `
    <app-user-card name="Kiryu Kazuma" role="Manager" />
    <app-user-card name="Majima Goro" role="Field Agent" />
  `,
  imports: [UserCardComponent],
  standalone: true,
})
export class AppComponent {}

Registering a component in an NgModule-based application.

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { UserCardComponent } from './user-card.component';

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

Summary

Angular components consist of a @Component-decorated class, an HTML template, and optional styles. They are the primary unit for organizing UI in Angular. With the standalone API (Angular 14+), components declare their own dependencies in the imports array, removing the need for an NgModule wrapper.

Components communicate with parent components via @Input (receiving data) and notify parents via @Output / EventEmitter (emitting events). For data binding between component and template, see Data Binding. For how lifecycle hooks work, see Lifecycle Hooks.

Common Mistake: Forgetting to add a component to NgModule declarations

In NgModule-based applications, every component must be declared in exactly one NgModule's declarations array. Using a component without declaring it causes a template parse error.

// NG: UserCardComponent is not declared in any NgModule
@NgModule({
  declarations: [AppComponent], // UserCardComponent missing
  imports: [BrowserModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

// OK: add UserCardComponent to declarations
@NgModule({
  declarations: [AppComponent, UserCardComponent],
  imports: [BrowserModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

Common Mistake: Selector name collision

If two components share the same selector, Angular may silently use one and ignore the other, causing unexpected behavior. Always use a unique, app-specific prefix (e.g., app-) for selectors.

// NG: both components use 'app-card' — collision
@Component({ selector: 'app-card', ... })
export class CardComponent {}

@Component({ selector: 'app-card', ... }) // duplicate selector
export class AnotherCardComponent {}

// OK: use distinct selectors
@Component({ selector: 'app-user-card', ... })
export class UserCardComponent {}

@Component({ selector: 'app-product-card', ... })
export class ProductCardComponent {}

Common Mistake: Forgetting imports in a standalone component

Standalone components must list every directive, pipe, and component they use in their imports array. Omitting an import causes an "Unknown element" or "Unknown directive" compile error.

// NG: UserCardComponent used in template but not imported
@Component({
  selector: 'app-root',
  template: `<app-user-card name="Kiryu Kazuma" />`,
  standalone: true,
  // imports array is missing
})
export class AppComponent {}

// OK: UserCardComponent added to imports
import { UserCardComponent } from './user-card.component';

@Component({
  selector: 'app-root',
  template: `<app-user-card name="Kiryu Kazuma" />`,
  imports: [UserCardComponent],
  standalone: true,
})
export class AppComponent {}

If you find any errors or copyright issues, please contact us.

Home

Angular Dictionary