Guides
Signup For Free

Knit UI Component with AngularJS

Suggest Edits

Import the web component in your html file

Firstly we need to import the web component through JS file link using a <script> tag inside <head>.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular App</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script type="module" src="https://af1.getknit.dev/knit-ui-comp.js" ></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

📘

Make sure to import the web component script as a module

Make sure to include type="module" in the script tag.

Declare the component and required functions

Declare the knit-auth component in app.component.html and attach functions for custom events emitted from the knit-auth component. 

<knit-auth  [authSessionToken]="token" (onNewSession)="onNewSession()" (onFinish)="onFinish($event)"  (onDeactivate)="onDeactivate($event)" (onKnitClose)="onKnitClose($event)">
<!-- Set skipIntro attribute to disable the introduction screen -->
<!-- <knit-auth  [authSessionToken]="token" [skipIntro]="true" (onNewSession)="onNewSession()" (onFinish)="onFinish($event)" (onDeactivate)="onDeactivate($event)" (onKnitClose)="onKnitClose($event)"> -->
   <!-- Declare a clickable element (preferably a button)  as child that has a slot attribute with value 'trigger' -->
  <button slot="trigger">Integrate with Knit</button>
</knit-auth>

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
	// Knit Auth component won't open with a empty session token
  token = '';
  //Set the token once the component has initialised
  ngOnInit(): void {
    this.onNewSession();
  }
  // Backend call to generate & get the authSessionToken
  onNewSession(): void {
    // Hit the backend to generate authSessionToken
    fetch('https://yourbackend.com/getSessionToken', { method: 'GET' })
      .then((res) => res.json())
      .then((r) => {
        this.token = r.token;
      });
  }
  // Upon finishing the integration flow
  onFinish(event: Event): void {
    // integrationDetails is emitted through onFinish  custom event
    console.log((<CustomEvent>event)['detail']['integrationDetails']);
  }
  
  // Upon deactivate of integration
  onDeactivate(event: Event): void {
    // integrationDetails is emitted through onDeactivate custom event
    console.log((<CustomEvent>event)['detail']['integrationDetails']);
  }
  
  // Upon closing of the knit-auth component
  onKnitClose(event: Event): void {
    console.log((<CustomEvent>event)['detail']['knitClosed']);
  }
}

Include CUSTOM_ELEMENTS_SCHEMA in module schemas

CUSTOM_ELEMENTS_SCHEMA from @angular/core is required because knit-auth is a custom web component.

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

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

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

Things to consider:

  • Pass any element ( preferably a button ) as a child to the knit-auth component, with slot="trigger attribute. This element will open the UI Auth component when clicked.
  • Assign functions to onNewSession, onFinish, onDeactivate and onKnitClose events emitted from the knit-auth component. onNewSession should call your backend to get a new auth session token, if need be.
  • Pass session token that you received from your backend to the authSessionToken property of the knit-auth component through the onNewSession function.
  • If you want to disable the introduction screen, set skipIntro attribute to true.
  • Upon completion of the integration setup flow, an integrationDetails object is emitted through the onFinish event, you can access the integrationDetails using e['detail']['integrationDetails'].
  • Upon deactivation of the integration, an integrationDetails object is emitted through the onDeactivate event, you can access the integrationDetails using e['detail']['integrationDetails'].
  • Upon closing of the knit-auth component, onKnitClose event is emitted.

Updated about 1 year ago

What’s Next