Angular

Wink コンポーネントは Angular Elements として提供されており、Angular アプリケーションに自然に統合できます。必要な設定は、Angular のコンパイラに未知の要素名を許可することだけです。

@wink/elements npm package TypeScript 型定義付きの CDN バンドルをインストールして読み込みます。

インストール

npm install @wink/elements

ブートストラップ — CDN を一度だけ読み込む

bootstrapApplication の前（または APP_INITIALIZER 内）で load() を呼び出します：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './portal/app.component';
import { load } from '@wink/elements';

load({ clientId: import.meta.env['NG_APP_WINK_CLIENT_ID'] });

bootstrapApplication(AppComponent).catch(console.error);

カスタム要素名を許可する

<wink-*> タグをレンダリングするすべてのスタンドアロンコンポーネント（またはモジュール）に CUSTOM_ELEMENTS_SCHEMA を追加します：

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
  selector: 'app-hotels',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <wink-content-loader layout="HOTEL" [id]="layoutId" />
    <wink-lookup />
  `,
})
export class HotelsComponent {
  layoutId = 'YOUR_LAYOUT_ID';
}

属性のバインディング

Angular のテンプレート構文はカスタム要素の文字列属性に直接対応しています：

<!-- 静的 -->
<wink-content-loader layout="HOTEL" id="abc123" />

<!-- 動的バインディング -->
<wink-content-loader [attr.layout]="layout" [attr.id]="layoutId" />

値が動的な場合は [attr.name] バインディングを使います。Angular の通常の [property] バインディングは DOM プロパティを対象としており、カスタム要素が依存する HTML 属性とは異なるためです。

環境変数

@angular/cli 16+ プロジェクトでは、environment.ts または NG_APP_* プレフィックスを @ngx-env/builder と共に使用します：

export const environment = {
  winkClientId: 'YOUR_CLIENT_ID',
};

import { environment } from './environments/environment';
load({ clientId: environment.winkClientId });

TypeScript 型定義

@wink/elements パッケージはすべてのコンポーネント属性に対する型付きインターフェースをエクスポートしています：

import type { WinkContentLoaderAttributes, WinkLayout } from '@wink/elements';

const attrs: WinkContentLoaderAttributes = {
  layout: 'HOTEL' as WinkLayout,
  id: 'abc123',
};