@tawasal/angular

---

check our Documentation 👉 platform.tawasal.ae

---

Tawasal Service for Angular

The Tawasal Service for Angular provides a set of functionalities to interact with the Tawasal API, including user management, contacts selection, clipboard reading, phone number retrieval, QR code scanning, and more.

Installation

First, install the @tawasal/angular package via npm:

npm install @tawasal/angular

Usage

1. Import TawasalService in your Module

Make sure to import the HttpClientModule and TawasalService in your Angular module.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { TawasalComponent } from './tawasal.component';
import { TawasalService } from '@tawasal/angular';

@NgModule({
  declarations: [AppComponent, TawasalComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [TawasalService],
  bootstrap: [AppComponent],
})
export class AppModule {}

2. Inject TawasalService in your Component

Inject the TawasalService in your component and use its methods and observables to interact with the Tawasal API.

import { Component, OnInit } from '@angular/core';
import { TawasalService, ContactExtended } from '@tawasal/angular';

@Component({
  selector: 'app-tawasal',
  templateUrl: './tawasal.component.html',
  styleUrls: ['./tawasal.component.css'],
})
export class TawasalComponent implements OnInit {
  user$ = this.tawasalService.user$;
  avatar$ = this.tawasalService.avatar$;
  userLink$ = this.tawasalService.userLink$;
  isLoading$ = this.tawasalService.isLoading$;
  error$ = this.tawasalService.error$;

  contacts$ = this.tawasalService.contacts$;
  clipboard$ = this.tawasalService.clipboard$;
  phone$ = this.tawasalService.phone$;
  qr$ = this.tawasalService.qr$;

  constructor(private tawasalService: TawasalService) {}

  ngOnInit() {
    this.tawasalService.loadUser();
  }

  onSelectContacts(title: string) {
    this.tawasalService.selectContacts(title);
  }

  onReadClipboard() {
    this.tawasalService.readClipboard();
  }

  onGetPhoneNumber(title: string) {
    this.tawasalService.getPhoneNumber(title);
  }

  onShowScanQR() {
    this.tawasalService.showScanQR();
  }

  onCloseScanQR() {
    this.tawasalService.closeScanQR();
  }

  onHaptic() {
    this.tawasalService.useTawasalSDK().haptic();
  }

  onOpen() {
    this.tawasalService.useTawasalSDK().open();
  }

  onCloseApp() {
    this.tawasalService.useTawasalSDK().closeApp();
  }

  onShare() {
    this.tawasalService.useTawasalSDK().share();
  }
}

3. TawasalComponent Template

Bind the observables and methods to your component template to display the data and provide user interactions.

<div *ngIf="isLoading$ | async">Loading...</div>
<div *ngIf="error$ | async as error">Error: {{ error.message }}</div>

<div *ngIf="user$ | async as user">
  <p>User: {{ user.firstName }} {{ user.lastName }}</p>
  <img [src]="avatar$ | async" alt="User Avatar" />
  <p>User Link: {{ userLink$ | async }}</p>
</div>

<button (click)="onSelectContacts('Select Contacts')">Select Contacts</button>
<ul>
  <li *ngFor="let contact of contacts$ | async">
    {{ contact.firstName }} {{ contact.lastName }}
  </li>
</ul>

<button (click)="onReadClipboard()">Read Clipboard</button>
<p>Clipboard: {{ clipboard$ | async }}</p>

<button (click)="onGetPhoneNumber('Get Phone Number')">Get Phone Number</button>
<p>Phone: {{ phone$ | async }}</p>

<button (click)="onShowScanQR()">Show Scan QR</button>
<p>QR: {{ qr$ | async }}</p>
<button (click)="onCloseScanQR()">Close Scan QR</button>

<button (click)="onHaptic()">Haptic</button>
<button (click)="onOpen()">Open</button>
<button (click)="onCloseApp()">Close App</button>
<button (click)="onShare()">Share</button>

API

TawasalService Methods

• loadUser(): Loads the user information including the avatar and user link.
• selectContacts(title: string): Opens a dialog to select contacts.
• readClipboard(): Reads the clipboard content.
• getPhoneNumber(title: string): Prompts for the phone number.
• showScanQR(): Opens the QR code scanner.
• closeScanQR(): Closes the QR code scanner.
• useTawasalSDK(): Provides access to additional Tawasal SDK functionalities such as haptic, open, closeApp, and share.

Observables

• user$: Observable for the user information.
• avatar$: Observable for the user avatar.
• userLink$: Observable for the user link.
• isLoading$: Observable for the loading state.
• error$: Observable for the error state.
• contacts$: Observable for the selected contacts.
• clipboard$: Observable for the clipboard content.
• phone$: Observable for the phone number.
• qr$: Observable for the QR code content.

License

MIT

---

This README provides a comprehensive guide to integrating the Tawasal Service into an Angular application. Adjust the component template and styles as per your application's requirements.