> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/angular/angular/llms.txt
> Use this file to discover all available pages before exploring further.

# @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

```typescript theme={null}
@Component(metadata: Component): TypeDecorator
```

## Parameters

<ParamField path="metadata" type="Component" required>
  Configuration object that specifies how the component should be processed, instantiated, and used at runtime.
</ParamField>

## Component Metadata

### selector

<ParamField path="selector" type="string">
  CSS selector that identifies this component in a template. Can be an element name, class, attribute, or combination.

  ```typescript theme={null}
  selector: 'app-user-profile'  // Element: <app-user-profile>
  selector: '.user-profile'     // Class: <div class="user-profile">
  selector: '[userProfile]'     // Attribute: <div userProfile>
  ```
</ParamField>

### template / templateUrl

<ParamField path="template" type="string">
  Inline HTML template for the component.

  ```typescript theme={null}
  template: '<h1>{{title}}</h1>'
  ```
</ParamField>

<ParamField path="templateUrl" type="string">
  Path to an external HTML template file.

  ```typescript theme={null}
  templateUrl: './user-profile.component.html'
  ```
</ParamField>

<Note>
  Use either `template` or `templateUrl`, not both.
</Note>

### styles / styleUrls / styleUrl

<ParamField path="styles" type="string | string[]">
  Inline CSS styles for the component.

  ```typescript theme={null}
  styles: [`
    h1 { color: blue; }
    .highlight { background: yellow; }
  `]
  ```
</ParamField>

<ParamField path="styleUrls" type="string[]">
  Paths to external CSS stylesheet files.

  ```typescript theme={null}
  styleUrls: ['./user-profile.component.css']
  ```
</ParamField>

<ParamField path="styleUrl" type="string">
  Path to a single external CSS stylesheet file.

  ```typescript theme={null}
  styleUrl: './user-profile.component.css'
  ```
</ParamField>

### standalone

<ParamField path="standalone" type="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.

  ```typescript theme={null}
  standalone: true  // Recommended for new components
  ```
</ParamField>

### imports

<ParamField path="imports" type="Type<any> | ReadonlyArray<any>">
  Standalone component dependencies - other components, directives, pipes, or NgModules that can be used in the template.

  ```typescript theme={null}
  imports: [CommonModule, FormsModule, ButtonComponent]
  ```
</ParamField>

<Note>
  Only available for standalone components.
</Note>

### providers

<ParamField path="providers" type="Provider[]">
  Services or values available for dependency injection in this component and its children.

  ```typescript theme={null}
  providers: [UserService, { provide: API_URL, useValue: 'https://api.example.com' }]
  ```
</ParamField>

### viewProviders

<ParamField path="viewProviders" type="Provider[]">
  Services available only to the component's view (not content children).

  ```typescript theme={null}
  viewProviders: [LoggerService]
  ```
</ParamField>

### changeDetection

<ParamField path="changeDetection" type="ChangeDetectionStrategy">
  Strategy for detecting changes:

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

  ```typescript theme={null}
  changeDetection: ChangeDetectionStrategy.OnPush
  ```
</ParamField>

### encapsulation

<ParamField path="encapsulation" type="ViewEncapsulation">
  Style encapsulation strategy:

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

  ```typescript theme={null}
  encapsulation: ViewEncapsulation.ShadowDom
  ```
</ParamField>

### inputs

<ParamField path="inputs" type="string[] | {name: string, alias?: string, required?: boolean, transform?: Function}[]">
  Array of input property names or configuration objects.

  ```typescript theme={null}
  inputs: ['userName', {name: 'userId', alias: 'id', required: true}]
  ```
</ParamField>

### outputs

<ParamField path="outputs" type="string[]">
  Array of output property names.

  ```typescript theme={null}
  outputs: ['userSelected', 'userDeleted']
  ```
</ParamField>

### exportAs

<ParamField path="exportAs" type="string">
  Name for template variable references.

  ```typescript theme={null}
  exportAs: 'userProfile'
  ```

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

### host

<ParamField path="host" type="{[key: string]: string}">
  Map of class properties to host element bindings.

  ```typescript theme={null}
  host: {
    '[class.active]': 'isActive',
    '(click)': 'onClick($event)',
    'role': 'button'
  }
  ```
</ParamField>

### hostDirectives

<ParamField path="hostDirectives" type="Type<unknown>[] | {directive: Type<unknown>, inputs?: string[], outputs?: string[]}[]">
  Directives to apply to the host element.

  ```typescript theme={null}
  hostDirectives: [
    TooltipDirective,
    {directive: MenuBehavior, inputs: ['menuDisabled: disabled']}
  ]
  ```
</ParamField>

## Basic Example

```typescript user-profile.component.ts theme={null}
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

```typescript counter.component.ts theme={null}
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

```typescript optimized.component.ts theme={null}
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};
}
```

<Note>
  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
</Note>

## Component with External Files

```typescript app.component.ts theme={null}
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](/api/core/directive) - Create custom directives
* [@Input](/api/core/input-output#input) - Define input properties
* [@Output](/api/core/input-output#output) - Define output properties
* [Lifecycle Hooks](/api/core/lifecycle-hooks) - React to component lifecycle events

## See Also

<CardGroup cols={2}>
  <Card title="Components Guide" icon="book" href="/concepts/components">
    Learn component fundamentals
  </Card>

  <Card title="Templates" icon="book" href="/concepts/templates">
    Master template syntax
  </Card>

  <Card title="Styling" icon="book" href="/concepts/components">
    Style your components
  </Card>

  <Card title="Change Detection" icon="book" href="/advanced/change-detection">
    Optimize performance
  </Card>
</CardGroup>