angular-elements

@angular/elements

バージョン： Angular 21（2025） タグ： Web コンポーネント、カスタム要素、マイクロフロントエンド

参考資料： Elements ガイド • API

API の変更

このセクションでは、最近のバージョン固有の API の変更について説明します。

• NEW：createCustomElement API — Angular コンポーネントをカスタム要素としてパッケージ化します

• NEW：NgElementConfig — カスタム要素の動作を設定します

• NEW：入力／出力のマッピング — Angular の入力／出力を Web コンポーネントの属性にマッピングします

• NEW：スタンドアロン要素 — NgModule を使わずにスタンドアロン要素を構築します

ベストプラクティス

• @angular/elements をインストールします

npm install @angular/elements

• コンポーネントからカスタム要素を作成します

import { createCustomElement } from '@angular/elements';

@Injectable()
export class ElementRegistrar {
  constructor(private injector: Injector) {}

  register() {
    const element = createCustomElement(MyComponent, { injector: this.injector });
    customElements.define('my-element', element);
  }
}

• main.ts で使用します

import { createApplication } from '@angular/platform-browser';
import { createCustomElement } from '@angular/elements';

bootstrapApplication(AppComponent).then(appRef => {
  const element = createCustomElement(MyComponent, { injector: appRef.injector });
  customElements.define('my-component', element);
});

• 入力と出力をマッピングします

const element = createCustomElement(MyComponent, {
  injector: this.injector,
  events: ['myEvent'],
  attributes: ['myInput']
});

• CUSTOM_ELEMENTS_SCHEMA を使用します

// To use custom elements in Angular
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

• Web コンポーネントとしてビルドします

// angular.json
{
  "build": {
    "options": {
      "outputPath": "dist",
      "singleBundle": true
    }
  }
}

• Web コンポーネントのデータには input() と output() を使用します

@Component({
  selector: 'my-element',
  standalone: true
})
export class MyElementComponent {
  data = input<string>('');
  output = output<string>();

  onClick() {
    this.output.emit('event-data');
  }
}

• コンテンツの投影を処理します

@Component({
  selector: 'my-element',
  template: `
    <div class="header">
      <ng-content select="[header]"></ng-content>
    </div>
    <div class="body">
      <ng-content></ng-content>
    </div>
  `
})
export class MyElementComponent {}

• マイクロフロントエンドで使用します

// Register multiple elements
const elements = [ButtonComponent, CardComponent, InputComponent];
elements.forEach(comp => {
  const el = createCustomElement(comp, { injector });
  customElements.define(comp.selector, el);
});