Angular wrapper for the Nanatri wishlist button. Automatically loads the SDK from the CDN — no extra script tags needed.
npm install nanatri-angularAngular 12+ is supported.
Import NanatriModule into your Angular module:
import { NgModule } from '@angular/core';
import { NanatriModule } from 'nanatri-angular';
@NgModule({
imports: [NanatriModule],
})
export class AppModule {}<nanatri-button
[merchantId]="'your_merchant_id'"
[label]="'Save to wishlist'"
[color]="'#5956E9'"
[textColor]="'#ffffff'"
[width]="'220px'"
[height]="'48px'"
[lang]="'en'"
(clicked)="onClicked()"
(opened)="onOpened()"
(signedIn)="onSignedIn($event)"
(added)="onAdded($event)"
(failed)="onFailed($event)"
(closed)="onClosed()"
></nanatri-button>import { Component } from '@angular/core';
import type {
NanatriButtonSignedInDetail,
NanatriButtonAddedDetail,
NanatriButtonFailedDetail,
} from 'nanatri-angular';
@Component({ ... })
export class ProductPageComponent {
onClicked() {
console.log('Button clicked');
}
onOpened() {
console.log('Modal opened');
}
onSignedIn(detail: NanatriButtonSignedInDetail) {
console.log('Signed in:', detail.userId);
}
onAdded(detail: NanatriButtonAddedDetail) {
console.log('Added by user:', detail.userId);
}
onFailed(detail: NanatriButtonFailedDetail) {
console.log('Failed:', detail.error, detail.code);
}
onClosed() {
console.log('Modal closed');
}
}| Input | Type | Required | Default | Description |
|---|---|---|---|---|
merchantId |
string |
Yes | — | Your Nanatri merchant ID |
label |
string |
No | "Save" |
Button label text |
color |
string |
No | "#5956E9" |
Button background color |
textColor |
string |
No | "#ffffff" |
Button text color |
width |
string |
No | "200px" |
Button width |
height |
string |
No | "48px" |
Button height |
lang |
string |
No | "en" |
UI language ("en" or "ka") |
| Output | Payload | Description |
|---|---|---|
clicked |
— | Button clicked, modal is about to open |
opened |
— | Modal opened |
signedIn |
{ userId: string } |
User completed sign-in |
added |
{ userId: string } |
Product added to wishlist |
failed |
{ error: string, code: string } |
Adding to wishlist failed |
closed |
— | Modal closed |