Angular

Komponen Wink sendiri adalah Angular Elements — mereka terintegrasi secara alami dalam aplikasi Angular. Satu-satunya pengaturan yang diperlukan adalah memberi tahu compiler Angular untuk mengizinkan nama elemen yang tidak dikenal.

@wink/elements npm package Pasang dan muat bundel CDN dengan tipe TypeScript.

Pasang

npm install @wink/elements

Bootstrap — muat CDN sekali

Panggil load() sebelum bootstrapApplication (atau di dalam 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);

Izinkan nama elemen kustom

Tambahkan CUSTOM_ELEMENTS_SCHEMA ke setiap komponen standalone (atau modul) yang merender tag <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';
}

Binding atribut

Sintaks template Angular bekerja langsung dengan atribut string elemen kustom:

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

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

Gunakan binding [attr.name] saat nilainya dinamis — binding [property] biasa Angular menargetkan properti DOM, bukan atribut HTML, yang menjadi dasar elemen kustom.

Variabel lingkungan

Untuk proyek @angular/cli 16+, gunakan environment.ts atau prefix NG_APP_* dengan @ngx-env/builder:

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

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

Tipe TypeScript

Paket @wink/elements mengekspor interface bertipe untuk semua atribut komponen:

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

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