Angular

Ang Wink components ay mga Angular Elements mismo — natural silang nag-iintegrate sa mga Angular na aplikasyon. Ang tanging kinakailangang setup ay sabihin sa Angular compiler na payagan ang mga hindi kilalang pangalan ng elemento.

@wink/elements npm package I-install at i-load ang CDN bundle na may TypeScript types.

Install

npm install @wink/elements

Bootstrap — i-load ang CDN nang isang beses

Tawagin ang load() bago ang bootstrapApplication (o sa loob ng APP_INITIALIZER):

src/main.ts

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

Payagan ang mga custom element names

Idagdag ang CUSTOM_ELEMENTS_SCHEMA sa bawat standalone component (o module) na nagre-render ng <wink-*> tags:

src/portal/hotels/hotels.component.ts

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

Mga aplikasyon gamit ang NgModule

Para sa mga app na batay sa NgModule, idagdag ang CUSTOM_ELEMENTS_SCHEMA sa schemas array ng @NgModule decorator.

Binding ng mga attributes

Direktang gumagana ang Angular template syntax sa mga string attributes ng custom element:

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

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

Gamitin ang [attr.name] binding kapag dynamic ang value — ang regular na [property] binding ng Angular ay tumutukoy sa mga DOM properties, hindi sa HTML attributes na ginagamit ng mga custom elements.

Mga environment variables

Para sa mga proyekto ng @angular/cli 16+, gamitin ang environment.ts o ang NG_APP_* prefix kasama ang @ngx-env/builder:

src/environments/environment.ts

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

src/main.ts

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

TypeScript types

Nag-eexport ang @wink/elements package ng typed interfaces para sa lahat ng component attributes:

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

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

Karagdagang babasahin

• Web Components reference
• @wink/elements npm package