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('discover');
  }
 
  onCloseApp() {
    this.tawasalService.useTawasalSDK().closeApp();
  }
 
  onShare() {
    this.tawasalService.useTawasalSDK().share({
      text: 'Check this out!',
      url: 'https://example.com'
    });
  }
 
  onOpenApp() {
    this.tawasalService.useTawasalSDK().openApp('https://example.com');
  }
 
  onOpenUrl() {
    this.tawasalService.useTawasalSDK().openUrl('https://example.com');
  }
 
  onOpenChat() {
    this.tawasalService.useTawasalSDK().openChat(123456);
  }
 
  onDisablePullToRefresh() {
    this.tawasalService.useTawasalSDK().disablePullToRefresh(true);
  }
}

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 Discover</button>
<button (click)="onCloseApp()">Close App</button>
<button (click)="onShare()">Share</button>
<button (click)="onOpenApp()">Open App</button>
<button (click)="onOpenUrl()">Open URL</button>
<button (click)="onOpenChat()">Open Chat</button>
<button (click)="onDisablePullToRefresh()">Disable Pull to Refresh</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:
- haptic(pressure?: 'light' | 'medium' | 'heavy' | 'soft' | 'rigid'): Triggers haptic feedback
- open(destination: Destination): Opens a specific destination in the app (e.g., ‘discover’, ‘chats’, ‘settings’)
- closeApp(): Closes or hides the app intelligently
- share({ text, url, imgUrl?, isCustomIos? }): Shares content via the Tawasal SuperApp
- openApp(appUrl: string, tag?: string): Opens another app with the specified URL
- openUrl(url: string): Opens a URL in the browser
- openChat(userIdOrNickname: number | string): Opens a chat with a specific user
- disablePullToRefresh(disabled: boolean): Controls the pull-to-refresh feature

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.

Vue Node.js