Use when creating or modifying Angular components. Covers project structure, component patterns, signals, Storybook stories and the shared component library.
feature-name/
├── feature-name.component.ts → Lógica
├── feature-name.component.html → Template
├── feature-name.component.scss → Estilos
└── feature-name.component.spec.ts → Testes
frontend/src/app/shared/components/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()}`);
}
// frontend/src/stories/{{component-name}}.stories.ts
import type { Meta, StoryObj } from '@storybook/angular';
import { {{ComponentName}}Component } from '../app/shared/components/{{component-name}}/{{component-name}}.component';
const meta: Meta<{{ComponentName}}Component> = {
title: 'Shared/{{ComponentName}}',
component: {{ComponentName}}Component,
tags: ['autodocs'],
};
export default meta;
type Story = StoryObj<{{ComponentName}}Component>;
export const Default: Story = {
args: {
title: 'Exemplo',
variant: 'primary',
},
};
export const Secondary: Story = {
args: {
title: 'Exemplo',
variant: 'secondary',
},
};
shared/components/core/features/{{feature-name}}/layouts/