Aurelia 1

Lynk works great with all modern app frameworks, including Aurelia, with full integration into the binding engine and component model.

Installation

To add LYNK to your Aurelia app, first authenticate to the Uplynk project package registry

npm config set -- //gitlab.edgecastcdn.net/api/v4/projects/6611/packages/npm/:_authToken=YOUR_ACCESS_TOKEN
echo @uplynk:registry=https://gitlab.edgecastcdn.net/api/v4/projects/6611/packages/npm/ >> .npmrc

Then install just like any other npm package

npm i @uplynk/lynk-design
pnpm install @uplynk/lynk-design

Next, open your src/main.ts file and add the following code to import the default theme set the default icon library and register the component library.

import '@uplynk/lynk-design/dist/themes/dark.css';
import {registerIconLibrary} from '@uplynk/lynk-design/dist/utilities/icon-library';

registerIconLibrary('default', {
    resolver: name => `https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/icons/${name}.svg`,
});

aurelia.use
    .standardConfiguration()
    ...
    .plugin(PLATFORM.moduleName('@uplynk/lynk-design'))

That’s it! Now you can start using LYNK components in your app!

Usage

Binding Events with Aurelia

When binding to standard Aurelia events like click, the trigger binding command seems to be more reliable than delegate.

<lynk-button click.trigger="myListener()"></lynk-button>

To bind listeners to custom events emitted by LYNK components, use the same trigger binding command on the event emitted from the component.

<lynk-menu ev-select.trigger="myListener($event)"></lynk-menu>

Two-way Data Binding

Because Aurelia doesn’t recognize form controls within LYNK components, the bind command will only ever resolve to simple to-view / one-way binding. To enable two-way binding on LYNK components, you must use the two-way binding attribute.

<!-- This doesn't work for form controls -->
<lynk-input value.bind="myValue">
  <!-- This works as expected -->
  <lynk-input value.two-way="myValue"></lynk-input
></lynk-input>