Skip to main content

​
Overview

The VenziaDatalinkRestService is an Angular service that provides methods to call external REST APIs. It’s used by datalink components to search and retrieve data from external systems configured in the datalink definitions.

​
Import

import { VenziaDatalinkRestService } from 'venzia-datalink';

​
Injectable

@Injectable({
  providedIn: 'root'
})

​
Constructor

constructor(private http: HttpClient)
​
http
HttpClient
Angular HttpClient for making HTTP requests

​
Methods

​
callApi

Calls an external REST API endpoint with optional parameters and authentication. 
callApi(
  endpoint: string,
  params?: any,
  authdata?: string
): Observable<any>
​
endpoint
string
required
The full URL of the external API endpoint
​
params
any
Query parameters to include in the request
​
authdata
string
Base64-encoded authentication data for Basic authentication
​
returns
Observable<any>
Observable that emits the API response data

​
Example - Basic API Call

import { Component, OnInit } from '@angular/core';
import { VenziaDatalinkRestService } from 'venzia-datalink';

@Component({
  selector: 'app-search',
  template: `
    <input (input)="search($event.target.value)" />
    <div *ngFor="let result of results">
      {{ result.name }}
    </div>
  `
})
export class SearchComponent {
  results: any[] = [];

  constructor(private restService: VenziaDatalinkRestService) {}

  search(term: string) {
    const endpoint = 'https://api.example.com/customers';
    const params = { q: term, limit: 20 };

    this.restService.callApi(endpoint, params).subscribe(
      (data) => {
        this.results = data;
      },
      (error) => {
        console.error('Search failed:', error);
      }
    );
  }
}

​
Example - With Basic Authentication

import { Component } from '@angular/core';
import { VenziaDatalinkRestService } from 'venzia-datalink';

@Component({
  selector: 'app-secure-search',
  template: `<div>{{ data | json }}</div>`
})
export class SecureSearchComponent {
  data: any;

  constructor(private restService: VenziaDatalinkRestService) {}

  searchSecure() {
    const endpoint = 'https://secure-api.example.com/data';
    const params = { search: 'query' };
    
    // Create Base64 encoded credentials
    const authdata = window.btoa('username:password');

    this.restService.callApi(endpoint, params, authdata).subscribe(
      (result) => {
        this.data = result;
      },
      (error) => {
        console.error('Error:', error);
      }
    );
  }
}

import { Component, Input, OnInit } from '@angular/core';
import { VenziaDatalinkRestService } from 'venzia-datalink';

@Component({
  selector: 'app-datalink-search',
  template: `
    <input [(ngModel)]="searchTerm" (input)="performSearch()" />
    <div *ngFor="let item of items">
      {{ item.name }}
    </div>
  `
})
export class DatalinkSearchComponent implements OnInit {
  @Input() connectorRest: any; // From datalink configuration
  
  searchTerm = '';
  items: any[] = [];

  constructor(private restService: VenziaDatalinkRestService) {}

  performSearch() {
    if (!this.searchTerm) return;

    const filters = { limit: 20 };
    filters[this.connectorRest.searchParam] = this.searchTerm;

    let authdata: string | undefined;
    if (this.connectorRest.authentication?.type === 'basic') {
      authdata = window.btoa(
        `${this.connectorRest.authentication.username}:${this.connectorRest.authentication.password}`
      );
    }

    this.restService.callApi(this.connectorRest.url, filters, authdata).subscribe(
      (results) => {
        this.items = results;
      },
      (error) => {
        console.error('Search error:', error);
      }
    );
  }
}

​
Private Methods

​
extractData

Extracts data from the HTTP response. 
private extractData(res: Response): any
​
res
Response
HTTP response object
​
returns
any
Extracted response body or empty array

​
Implementation Details

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class VenziaDatalinkRestService {
  constructor(private http: HttpClient) {}

  callApi(endpoint: string, params?: any, authdata?: string): Observable<any> {
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        Authorization: `Basic ${authdata}`
      }),
      params: {}
    };

    if (params) {
      httpOptions.params = params;
    }

    return this.http.get(endpoint, httpOptions).pipe(
      map(this.extractData)
    );
  }

  private extractData(res: Response) {
    const body = res;
    return body || [];
  }
}

​
HTTP Headers

The service automatically sets the following headers:
​
Content-Type
string
Set to application/json
​
Authorization
string
Set to Basic {authdata} when authdata parameter is provided

​
Authentication

The service supports Basic authentication:
  1. Credentials are encoded using Base64: window.btoa('username:password')
  2. Encoded credentials are passed as the authdata parameter
  3. The service adds the Authorization: Basic {authdata} header

​
Error Handling

HTTP errors are propagated as Observable errors and should be handled by the calling component: 
this.restService.callApi(endpoint, params).subscribe(
  (data) => {
    // Success handler
  },
  (error) => {
    // Error handler
    console.error('API call failed:', error);
  }
);

​
Dependencies

  • @angular/core: Angular framework
  • @angular/common/http: HTTP client
  • rxjs: Reactive programming support

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us