Angular

Angular plays nice with custom elements, so you can use Lynk in your Angular apps with ease.

Installation

Download the npm package

To add Lynk to your Angular app, install the package from npm.

npm install @uplynk/lynk-design

Update the Angular Configuration

Next, include a theme. In this example, we’ll import the light theme.

Its also important to load the components by using a <script> tag into the index.html file. However, the Angular way to do it is by adding a script configurations into your angular.json file as follows:

"architect": {
  "build": {
    ...
    "options": {
      ...
      "styles": [
        "src/styles.scss",
        "@uplynk/lynk-design/dist/themes/light.css"
       ],
      "scripts": [
        "@uplynk/lynk-design/dist/lynk.js"
      ]
      ...

Setting up the base path

Next, set the base path for icons and other assets in the main.ts. In this example, we’ll use the CDN as a base path.

import { setBasePath } from '@uplynk/lynk-design/dist/utilities/base-path';

setBasePath('https://cdn.jsdelivr.net/npm/@uplynk/lynk-design@1.0.0/cdn/');

If you’d rather not use the CDN for assets, you can create a build task that copies node_modules/@uplynk/lynk-design/dist/assets into a public folder in your app. Then you can point the base path to that folder instead.

Configuration

Then make sure to apply the custom elements schema as shown below.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

Reference Lynk components in your Angular component code

import { LynkDrawer } from '@uplynk/lynk-design';

@Component({
  selector: 'app-drawer-example',
  template: '<div id="page"><button (click)="showDrawer()">Show drawer</button><lynk-drawer #drawer label="Drawer" class="drawer-focus" style="--size: 50vw"><p>Drawer content</p></lynk-drawer></div>'
})
export class DrawerExampleComponent implements OnInit {

  // use @ViewChild to get a reference to the #drawer element within component template
  @ViewChild('drawer')
  drawer?: ElementRef<LynkDrawer>;

  ...

  constructor(...) {
  }

  ngOnInit() {
  }

  ...

  showDrawer() {
    // use nativeElement to access Lynk components
    this.drawer?.nativeElement.show();
  }
}

Now you can start using Lynk components in your app!