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()
  }
}