mcpField
A
angular-components

angular-components

github.com/oguzhan18開発7182 回インストール31 週間前に更新
リポジトリ

angular-components について

Angular アプリケーション開発者向けのコンポーネント設計リファレンスです。スタンドアロンコンポーネント、signal ベースの入出力、テンプレート、変更検知、カプセル化、ホストバインディングを扱います。

主な機能

  1. 01スタンドアロンコンポーネントの作成
  2. 02signal ベースの入出力
  3. 03テンプレートとコンテンツ投影の設定
  4. 04変更検知とカプセル化の設定
  5. 05ホストのプロパティとイベントのバインド

活用シーン

  1. 01再利用可能なスタンドアロンコンポーネントの構築
  2. 02コンポーネントの入力とイベント出力の定義
  3. 03描画とコンポーネントスタイルの設定

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-components

インストール後、Claude Code で/angular-componentsを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/discussions/
_INDEX.md
references/docs/
_INDEX.md
references/issues/
_INDEX.md
references/releases/
_INDEX.md

詳細

Angular コンポーネント

バージョン： Angular 21（2025） タグ： コンポーネント、@Component、アーキテクチャ

参考資料： コンポーネントガイド • @Component API

ベストプラクティス

  • スタンドアロンコンポーネントを作成する
@Component({
  standalone: true,
  selector: 'app-my',
  imports: [CommonModule],
  template: `<p>Content</p>`
})
export class MyComponent {}
  • シグナルを使って入力を受け取る
@Component({})
export class MyComponent {
  data = input<string>('');
  required = input.required<User>();
  
  computed = computed(() => this.data()?.name);
}
  • イベントには出力を使う
@Component({})
export class MyComponent {
  data = output<string>();
  
  onClick() {
    this.data.emit('event');
  }
}
  • テンプレート参照変数を使う
@Component({
  template: `
    <input #nameInput>
    <button (click)="onSubmit(nameInput.value)">Submit</button>
  `
})
export class MyComponent {}
  • コンテンツ投影を使う
@Component({
  selector: 'app-card',
  template: `
    <div class="header">
      <ng-content select="[header]"></ng-content>
    </div>
    <div class="body">
      <ng-content></ng-content>
    </div>
  `
})
export class CardComponent {}
  • 変更検出戦略を使う
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class OptimizedComponent {}
  • カプセル化を使う
@Component({
  encapsulation: ViewEncapsulation.None // or Emulated, ShadowDom
})
export class StyledComponent {}
  • ホストバインディングを使う
@Component({
  host: {
    '[class.active]': 'isActive',
    '(click)': 'onClick()'
  }
})
export class HostComponent {
  isActive = false;
}

コメント

Markdown 対応