`@Component`

Marks a class as an Angular component and supplies its template and metadata.

Since Angular 2+ Spec ↗

Syntax

@Component(config: ComponentMetadata)

Parameters

Name	Type	Required	Description
`config`	`ComponentMetadata`	No	Metadata such as selector, template/templateUrl, styles, imports.

Returns

ClassDecorator — Decorator attaching component metadata to the class.

Examples

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

@Component({
  selector: 'app-hello',
  standalone: true,
  imports: [],
  template: `<h1>Hello {{ name }}</h1>`,
  styles: `h1 { color: rebeccapurple; }`,
})
export class HelloComponent {
  name = 'Angular';
}

Notes

In Angular 20 components are standalone by default, so `standalone: true` is optional. Declare template dependencies in `imports`. Prefer `changeDetection: ChangeDetectionStrategy.OnPush` with signals for performance.