Inslallation

npm install argos-link-ui-ng --save

Usage

1. Import the ArgosLinkUiNgModule:

import { ArgosLinkUiNgModule } from 'argos-link-ui-ng';

2. Add ArgosLinkUiNgModule to your module imports:

@NgModule({ ... imports: [ ... ArgosLinkUiNgModule ] })

Example

on app.component.html file:

<div *ngIf="loading">loading...</div>
<div class="argos-link-container">
	<lib-argos-link-ui-ng [cssClass]="cssClass" [buttonIcons]="buttonIcons" [productImage]="productImage" [onAccountLinkSubmit]="onAccountLinkSubmit.bind(this)" [onAccountLinkSuccess]="onAccountLinkSuccess.bind(this)" [onAccountLinkError]="onAccountLinkError.bind(this)">
	</lib-argos-link-ui-ng>
</div>

on app.component.ts file:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public title = 'app';
  public loading = false;
  public cssClass = 'my-custom-class'; // custom class (for custom styling)
  public productImage = ''; // product image
  public buttonIcons = {
    ios: '../../assets/svg/appleinc.svg', // icon for ios button
    android: '../../assets/svg/android.svg', // icon for android button
    linkIcon: '' // icon for link account button
  };

  constructor(
    private changeDetectorRef: ChangeDetectorRef
  ) {
  }

  public onAccountLinkSubmit() {
    this.loading = true; // show a loading text or whatever loading indicator you like.
    this.changeDetectorRef.detectChanges(); // force rerender ui
  }

  public onAccountLinkSuccess(res: any) {
    this.loading = false; // hide loading
    this.changeDetectorRef.detectChanges(); // force rerender ui
    console.log(res); // success data response
  }

  public onAccountLinkError(error: string) {
    this.loading = false; // hide loading
    this.changeDetectorRef.detectChanges(); // force rerender ui
    console.log(error); // error message
  }
}