Angular TypeScript

Standalone component

typescriptimport { Component } from '@angular/core';
import Button from '@uxkm/angular/button';

@Component({
  selector: 'app-save',
  standalone: true,
  imports: [Button],
  template: `<Button variant="filled">저장</Button>`,
})
export class SaveComponent {}

Angular는 TypeScript를 기본으로 사용합니다. component는 @uxkm/angular/button처럼 subpath에서 default export로 가져옵니다.

Input API

typescriptimport { Component, signal } from '@angular/core';
import Button from '@uxkm/angular/button';

type ButtonVariant = 'filled' | 'outline' | 'ghost' | 'text';

@Component({
  selector: 'app-save',
  standalone: true,
  imports: [Button],
  template: `<Button [variant]="variant()">저장</Button>`,
})
export class SaveComponent {
  readonly variant = signal<ButtonVariant>('filled');
}

variant literal union은 Storybook API와 동일한 값만 허용합니다.

Strict template checking

tsconfig.json에서 strictTemplates를 활성화하면 template binding 오류를 compile 시점에 확인할 수 있습니다. component prop 이름과 event 이름이 API와 일치하는지 검증합니다.

공식 문서

• Angular TypeScript configuration
• Angular Typed forms