@Component

Decorator that marks a class as an Angular component

Overview

The @Component decorator marks a class as an Angular component and provides configuration metadata. Components are the most basic UI building blocks of an Angular application.

Signature

@Component(metadata: Component): TypeDecorator

Parameters

metadata · Component · required

Configuration object that specifies how the component should be processed, instantiated, and used at runtime.

Component Metadata

selector

selector · string

CSS selector that identifies this component in a template. Can be an element name, class, attribute, or combination.

selector: 'app-user-profile'  // Element: <app-user-profile>
selector: '.user-profile'     // Class: <div class="user-profile">
selector: '[userProfile]'     // Attribute: <div userProfile>

template / templateUrl

template · string

Inline HTML template for the component.

template: '<h1>{{title}}</h1>'

templateUrl · string

Path to an external HTML template file.

templateUrl: './user-profile.component.html'

Use either template or templateUrl, not both.

styles / styleUrls / styleUrl

styles · string | string[]

Inline CSS styles for the component.

styles: [`
  h1 { color: blue; }
  .highlight { background: yellow; }
`]

styleUrls · string[]

Paths to external CSS stylesheet files.

styleUrls: ['./user-profile.component.css']

styleUrl · string

Path to a single external CSS stylesheet file.

styleUrl: './user-profile.component.css'

standalone

standalone · boolean · default: "true"

When true, the component does not need to be declared in an NgModule. When false, it must be declared in an NgModule’s declarations array.

standalone: true  // Recommended for new components

imports

imports · Type<any> | ReadonlyArray<any>

Standalone component dependencies - other components, directives, pipes, or NgModules that can be used in the template.

imports: [CommonModule, FormsModule, ButtonComponent]

Only available for standalone components.

providers

providers · Provider[]

Services or values available for dependency injection in this component and its children.

providers: [UserService, { provide: API_URL, useValue: 'https://api.example.com' }]

viewProviders

viewProviders · Provider[]

Services available only to the component’s view (not content children).

viewProviders: [LoggerService]

changeDetection

changeDetection · ChangeDetectionStrategy

Strategy for detecting changes:

• ChangeDetectionStrategy.Default - Check component on every change detection cycle
• ChangeDetectionStrategy.OnPush - Check only when inputs change or events fire

changeDetection: ChangeDetectionStrategy.OnPush

encapsulation

encapsulation · ViewEncapsulation

Style encapsulation strategy:

• ViewEncapsulation.Emulated - Emulate shadow DOM (default)
• ViewEncapsulation.None - No encapsulation
• ViewEncapsulation.ShadowDom - Use native shadow DOM

encapsulation: ViewEncapsulation.ShadowDom

inputs

inputs · string[] | {name: string, alias?: string, required?: boolean, transform?: Function}[]

Array of input property names or configuration objects.

inputs: ['userName', {name: 'userId', alias: 'id', required: true}]

outputs

outputs · string[]

Array of output property names.

outputs: ['userSelected', 'userDeleted']

exportAs

exportAs · string

Name for template variable references.

exportAs: 'userProfile'

Usage: <app-user-profile #profile="userProfile"></app-user-profile>

host

host · {[key: string]: string}

Map of class properties to host element bindings.

host: {
  '[class.active]': 'isActive',
  '(click)': 'onClick($event)',
  'role': 'button'
}

hostDirectives

hostDirectives · Type<unknown>[] | {directive: Type<unknown>, inputs?: string[], outputs?: string[]}[]

Directives to apply to the host element.

hostDirectives: [
  TooltipDirective,
  {directive: MenuBehavior, inputs: ['menuDisabled: disabled']}
]

Basic Example

user-profile.component.ts

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

@Component({
  selector: 'app-user-profile',
  standalone: true,
  template: `
    <div class="profile">
      <h2>{{userName}}</h2>
      <p>{{bio}}</p>
    </div>
  `,
  styles: [`
    .profile {
      padding: 20px;
      border: 1px solid #ddd;
      border-radius: 8px;
    }
    h2 {
      margin: 0 0 10px 0;
      color: #333;
    }
  `]
})
export class UserProfileComponent {
  userName = 'John Doe';
  bio = 'Software Developer';
}

Component with Inputs and Outputs

counter.component.ts

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <div class="counter">
      <button (click)="decrement()">-</button>
      <span>{{count}}</span>
      <button (click)="increment()">+</button>
    </div>
  `,
  styles: [`
    .counter {
      display: flex;
      gap: 10px;
      align-items: center;
    }
    button {
      padding: 5px 15px;
      font-size: 18px;
    }
    span {
      font-size: 24px;
      font-weight: bold;
    }
  `]
})
export class CounterComponent {
  @Input() count: number = 0;
  @Output() countChange = new EventEmitter<number>();

  increment() {
    this.count++;
    this.countChange.emit(this.count);
  }

  decrement() {
    this.count--;
    this.countChange.emit(this.count);
  }
}

OnPush Change Detection

optimized.component.ts

import { Component, Input, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-optimized',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div>
      <h3>{{data.title}}</h3>
      <p>{{data.description}}</p>
    </div>
  `
})
export class OptimizedComponent {
  @Input() data!: {title: string, description: string};
}

With OnPush, the component only checks for changes when:

• An input reference changes
• An event originates from the component or its children
• Change detection is manually triggered

Component with External Files

app.component.ts

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'My Angular App';
  items = ['Item 1', 'Item 2', 'Item 3'];
}

Related APIs

• @Directive - Create custom directives
• @Input - Define input properties
• @Output - Define output properties
• Lifecycle Hooks - React to component lifecycle events

See Also

Components Guide

Learn component fundamentals

Templates

Master template syntax

Styling

Style your components

Change Detection

Optimize performance