modus-angular-best-practices

Modus Angular Best Practices

Component Architecture

Single Configurable Component Pattern

CRITICAL: Create one configurable component instead of multiple specific components.

// CORRECT: Single configurable component
@Component({
  selector: 'app-button',
  template: `
    <modus-button
      [color]="color()"
      [variant]="variant()"
      [size]="size()"
      [disabled]="disabled()"
      (buttonClick)="buttonClick.emit($event)"
    >
      <ng-content />
    </modus-button>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppButtonComponent {
  readonly color = input<ButtonColor>('primary');
  readonly variant = input<ButtonVariant>('filled');
  readonly size = input<ButtonSize>('md');
  readonly disabled = input<boolean>(false);
  readonly buttonClick = output<MouseEvent | KeyboardEvent>();
}

// WRONG: Multiple specific components
@Component({ selector: 'app-primary-button', ... })
export class PrimaryButtonComponent { /* ... */ }

@Component({ selector: 'app-secondary-button', ... })
export class SecondaryButtonComponent { /* ... */ }

@Component({ selector: 'app-danger-button', ... })
export class DangerButtonComponent { /* ... */ }

Component Composition Pattern

// CORRECT: Component composition
@Component({
  selector: 'app-card',
  template: `
    <div class="bg-card text-foreground border-default rounded-lg" [class]="customClass()">
      <ng-content />
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CardComponent {
  readonly customClass = input<string>('');
}

@Component({
  selector: 'app-card-header',
  template: `
    <div class="flex flex-col space-y-1.5 p-6" [class]="customClass()">
      <ng-content />
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CardHeaderComponent {
  readonly customClass = input<string>('');
}

@Component({
  selector: 'app-card-title',
  template: `
    <div class="text-2xl font-semibold leading-none tracking-tight" [class]="customClass()">
      <ng-content />
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CardTitleComponent {
  readonly customClass = input<string>('');
}

@Component({
  selector: 'app-card-content',
  template: `
    <div class="p-6 pt-0" [class]="customClass()">
      <ng-content />
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CardContentComponent {
  readonly customClass = input<string>('');
}

// Usage
template: `
  <app-card>
    <app-card-header>
      <app-card-title>Card Title</app-card-title>
    </app-card-header>
    <app-card-content>
      <div>Card content</div>
    </app-card-content>
  </app-card>
`