ng-rutter
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.10 • Public • Published

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

    Install

    npm i ng-rutter

    DownloadsWeekly Downloads

    13

    Version

    1.0.10

    License

    none

    Unpacked Size

    184 kB

    Total Files

    28

    Last publish

    Collaborators

    • steven4294