Angular Components

Estrutura de um componente

feature-name/
├── feature-name.component.ts       → Lógica
├── feature-name.component.html     → Template
├── feature-name.component.scss     → Estilos
└── feature-name.component.spec.ts  → Testes

Antes de criar um componente

1. Verifique se já existe em frontend/src/app/shared/components/
2. Se existir, reutilize — NUNCA recrie
3. Se precisar de variação, estenda o componente existente com nova prop/input

Template de componente (signals)

import { Component, input, output, signal, computed } from '@angular/core';

@Component({
  selector: 'app-{{component-name}}',
  standalone: true,
  imports: [],
  templateUrl: './{{component-name}}.component.html',
  styleUrl: './{{component-name}}.component.scss'
})
export class {{ComponentName}}Component {
  // Inputs (substituem @Input)
  title = input.required<string>();
  variant = input<'primary' | 'secondary'>('primary');

  // Outputs (substituem @Output)
  clicked = output<void>();

  // State interno
  isLoading = signal(false);

  // Computed
  cssClass = computed(() => `btn-${this.variant()}`);
}