generate-component

Generate Angular Component

Generate a complete Angular standalone component with tests and proper structure.

Arguments

$ARGUMENTS

• component-name: Name of the component (e.g., "user-card", "data-table")
• feature (optional): Feature folder (e.g., "users", "dashboard")

What This Command Generates

1. Component file ({name}.component.ts)
2. Template file ({name}.component.html)
3. Styles file ({name}.component.scss)
4. Test file ({name}.component.spec.ts)
5. Index file (index.ts)

Generated Structure

src/app/features/{feature}/components/{name}/
├── {name}.component.ts
├── {name}.component.html
├── {name}.component.scss
├── {name}.component.spec.ts
└── index.ts

Component Template

// {name}.component.ts
import {
  Component,
  ChangeDetectionStrategy,
  input,
  output,
  computed,
  signal
} from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-{name}',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './{name}.component.html',
  styleUrl: './{name}.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class {PascalName}Component {
  // Inputs
  // data = input.required<DataType>();
  // optional = input<string>('default');

  // Outputs
  // action = output<void>();

  // Internal state
  // loading = signal(false);

  // Computed
  // derived = computed(() => this.data().property);

  // Event handlers
  // onAction(): void {
  //   this.action.emit();
  // }
}

Template File

<!-- {name}.component.html -->
<div class="{name}">
  <!-- Component content -->
</div>

Styles File

// {name}.component.scss
.{name} {
  // Component styles
}

Test Template

// {name}.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { {PascalName}Component } from './{name}.component';

describe('{PascalName}Component', () => {
  let component: {PascalName}Component;
  let fixture: ComponentFixture<{PascalName}Component>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [{PascalName}Component]
    }).compileComponents();

    fixture = TestBed.createComponent({PascalName}Component);
    component = fixture.componentInstance;
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  describe('rendering', () => {
    it('should render component', () => {
      fixture.detectChanges();
      const element = fixture.nativeElement;
      expect(element.querySelector('.{name}')).toBeTruthy();
    });
  });

  describe('inputs', () => {
    // Add input tests here
  });

  describe('outputs', () => {
    // Add output tests here
  });

  describe('interactions', () => {
    // Add interaction tests here
  });
});