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

Package Sidebar

Install

npm i ng-rutter

Weekly Downloads

0

Version

1.0.10

License

none

Unpacked Size

184 kB

Total Files

28

Last publish

Collaborators

  • steven4294