Angular Components

Angular Components

Version: Angular 21 (2025) Tags: Components, @Component, Architecture

References: Components Guide • @Component API

Best Practices

• Create standalone component

@Component({
  standalone: true,
  selector: 'app-my',
  imports: [CommonModule],
  template: `<p>Content</p>`
})
export class MyComponent {}

• Use inputs with signals

@Component({})
export class MyComponent {
  data = input<string>('');
  required = input.required<User>();
  
  computed = computed(() => this.data()?.name);
}

• Use outputs for events

@Component({})
export class MyComponent {
  data = output<string>();
  
  onClick() {
    this.data.emit('event');
  }
}

• Use template reference variables

@Component({
  template: `
    <input #nameInput>
    <button (click)="onSubmit(nameInput.value)">Submit</button>
  `
})
export class MyComponent {}

• Use content projection