Unofficial Angular Rutter Link Port

Rutter Link Button for Angular; This is a simple wrapper for the javascript api that rutter provides. This is an unofficial npm package and is not endorsed or supported by Rutter. Source code is here

Installation

npm install ng-rutter --save

Usage

Import NgRutterModule

You need to import the NgRutterModule in the module of your app where you want to use it.

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

import { AppComponent } from './app.component';
import { NgRutterModule } from 'ng-rutter';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgRutterModule.forRoot({
      PUBLIC_API_KEY: 'MY_PUBLIC_API_KEY'
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Use the ng-rutter selector

Place the ng-rutter and pass the an event handler to process the publicToken handled by rutter.

<ng-rutter (onSuccess)="onSuccess($event)"></ng-rutter>

Handle the token response in your component.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  onSuccess(token: string) {
    callBackendAPI(token)
  }
}

Inputs

| Name | Type | Description | Default | |-----------------|--------|--------------------------------|----------| | text | string | the button text | "Log In" | | backgroundColor | string | background color of the button | '#000' | | color | string | the button text color | '#FFF' |

Outputs

| Name | Returns | Description | |-----------|---------|---------------------------------| | onSuccess | string | User successfully authenticated | | onLoad | void | Rutter alert loaded | | onExit | void | Rutter alert exited |

Use the NgRutterService to load Rutter programmatically

If you don't like the styling of the out of the box button you can trigger the Rutter dialog programmatically using the NgRutterService. This allows you to style the rutter link button as you'd like.

<div (click)="openRutter()"> Custom Button </div>

import { OnInit } from '@angular/core';
import { NgRutterService, NgRutterEventType } from 'ng-rutter';

export class AppComponent {

  constructor(private rutterService: NgRutterService) {
    this.rutterService.observable.subscribe(event => {
      if (event.name === NgRutterEventType.SUCCESS) {
        console.log(event.data.token)
      }
      if (event.name === NgRutterEventType.LOAD) {
        
      }
      if (event.name === NgRutterEventType.EXIT) {
        
      }
    })
  }

  openRutter() {
    this.rutterService.open()
  }
}