Creating Angular UI Wrappers

TypeScript
// lib-button.ts
import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'lib-button',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <button 
      class="lib-button lib-button--{{variant}} lib-button--{{size}}"
      [disabled]="disabled"
      (click)="onClick.emit($event)">
      <ng-content></ng-content>
    </button>
  `,
  styleUrls: ['./lib-button.css']
})
export class Button {
  @Input() variant: 'primary' | 'secondary' = 'primary';
  @Input() size: 'sm' | 'md' | 'lg' = 'md';
  @Input() disabled = false;
  @Output() onClick = new EventEmitter<Event>();
}

Progress:

• Create component files: {name}.ts, {name}.html, {name}.css, {name}.spec.ts, {name}.stories.ts
• Define selector as lib-{name} (kebab-case)
• Set standalone: true and OnPush strategy
• Add typed inputs with defaults
• Implement template with new control flow (@if, @for)
• Style with design tokens (var(--cds-*))
• Add to shared/ui/src/index.ts exports
• Create Storybook stories with tags: ['autodocs']

Example 1: Basic Input Wrapper

TypeScript
@Component({
  selector: 'lib-input',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => Input),
      multi: true
    }
  ]
})
export class Input implements ControlValueAccessor {
  @Input() placeholder = '';
  @Input() label = '';
  readonly value = model<string>('');
}

Example 2: PrimeNG Wrapper

TypeScript
// lib-prime-dialog.css
/* ============================================
   PRIMENG OVERRIDE - CLEANUP
   ============================================ */
:host ::ng-deep .p-dialog {
  border-radius: var(--cds-radius-lg);
  background: var(--cds-color-bg-main);
}

:host ::ng-deep .p-dialog-header {
  padding: var(--cds-spacing-4);
  border-bottom: 1px solid var(--cds-color-border-subtle);
}

Example 3: Storybook Story

TypeScript
export default {
  title: 'Components/Button',
  component: Button,
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary'],
      description: 'Button visual style'
    }
  }
};

export const Default = {
  args: {
    variant: 'primary',
    size: 'md'
  }
};