Angular

Les composants Wink sont eux-mêmes des Angular Elements — ils s’intègrent naturellement dans les applications Angular. La seule configuration requise est d’indiquer au compilateur Angular d’autoriser les noms d’éléments inconnus.

@wink/elements npm package Installez et chargez le bundle CDN avec les types TypeScript.

Installation

npm install @wink/elements

Bootstrap — charger le CDN une fois

Appelez load() avant bootstrapApplication (ou à l’intérieur de APP_INITIALIZER) :

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);

Autoriser les noms d’éléments personnalisés

Ajoutez CUSTOM_ELEMENTS_SCHEMA à chaque composant autonome (ou module) qui rend des balises <wink-*> :

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';
}

Liaison des attributs

La syntaxe de template Angular fonctionne directement avec les attributs chaîne des éléments personnalisés :

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

<!-- Liaison dynamique -->
<wink-content-loader [attr.layout]="layout" [attr.id]="layoutId" />

Utilisez la liaison [attr.name] lorsque la valeur est dynamique — la liaison régulière [property] d’Angular cible les propriétés DOM, pas les attributs HTML, sur lesquels les éléments personnalisés s’appuient.

Variables d’environnement

Pour les projets @angular/cli 16+, utilisez environment.ts ou le préfixe NG_APP_* avec @ngx-env/builder :

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

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

Types TypeScript

Le package @wink/elements exporte des interfaces typées pour tous les attributs des composants :

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

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