first commit

src/app/_services/alert.service.ts

@@ -0,0 +1,38 @@
+import { Injectable } from '@angular/core';
+import { Router, NavigationStart } from '@angular/router';
+import { Observable, Subject } from 'rxjs';
+
+@Injectable()
+export class AlertService {
+    private subject = new Subject<any>();
+    private keepAfterNavigationChange = false;
+
+    constructor(private router: Router) {
+        // Clear alert message on route change
+        router.events.subscribe(event => {
+            if (event instanceof NavigationStart) {
+                if (this.keepAfterNavigationChange) {
+                    // Only keep for a single location change
+                    this.keepAfterNavigationChange = false;
+                } else {
+                    // Clear alert
+                    this.subject.next({});
+                }
+            }
+        });
+    }
+
+    success(message: string, keepAfterNavigationChange = false) {
+        this.keepAfterNavigationChange = keepAfterNavigationChange;
+        this.subject.next({ type: 'success', text: message });
+    }
+
+    error(message: string, keepAfterNavigationChange = false) {
+        this.keepAfterNavigationChange = keepAfterNavigationChange;
+        this.subject.next({ type: 'error', text: message });
+    }
+
+    getMessage(): Observable<any> {
+        return this.subject.asObservable();
+    }
+}

src/app/_services/application-api.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ApplicationApiService } from './application-api.service';
+
+describe('ApplicationApiService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: ApplicationApiService = TestBed.get(ApplicationApiService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/_services/application-api.service.ts

@@ -0,0 +1,49 @@
+import { Injectable } from '@angular/core';
+import { Observable, of, throwError } from 'rxjs';
+import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
+const httpOptions = {
+  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
+};
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ApplicationApiService {
+  apiBaseURL = 'assets/data';
+  loadChatsDataURL = null;
+  loadEmailDataURL = null;
+  loadChatContactDataURL = null;
+   constructor(private http: HttpClient) {
+    this.loadChatsDataURL = `${this.apiBaseURL}/application/chats.json`;
+    this.loadChatContactDataURL = `${this.apiBaseURL}/application/chatcontact.json`;
+    this.loadEmailDataURL = `${this.apiBaseURL}/application/email.json`;
+  }
+  private handleError(error: HttpErrorResponse) {
+    if (error.error instanceof ErrorEvent) {
+      // Error
+      console.error('error:', error.error.message);
+    } else {
+      // Error
+      console.error(
+        `Api server returned ${error.status}, ` +
+        `error body: ${error.error}`);
+    }
+    // throwError is observable
+    return throwError('Error has happened');
+  }
+
+  private extractData(res: Response) {
+    const body = res;
+    return body || {};
+  }
+  getChatsData(): Observable<any> {
+    return this.http.get(this.loadChatsDataURL, httpOptions);
+  }
+  getChatContactData(): Observable<any> {
+    return this.http.get(this.loadChatContactDataURL, httpOptions);
+  }
+  getEmailData(): Observable<any> {
+    return this.http.get(this.loadEmailDataURL, httpOptions);
+  }
+}
+

src/app/_services/auth.service.ts

@@ -0,0 +1,120 @@
+import { Injectable } from '@angular/core';
+import { AngularFireAuth } from '@angular/fire/compat/auth';
+import firebase from 'firebase/compat/app';
+
+
+@Injectable()
+export class AuthService {
+  constructor(public afAuth: AngularFireAuth) {}
+
+  // Facebook login
+  doFacebookLogin() {
+    return new Promise<any>((resolve, reject) => {
+      const provider = new firebase.auth.FacebookAuthProvider();
+      this.afAuth.signInWithPopup(provider).then(
+        res => {
+          resolve(res);
+        },
+        err => {
+          console.log(err);
+          reject(err);
+        }
+      );
+    });
+  }
+
+  // Github login
+  doGitHubLogin() {
+    return new Promise<any>((resolve, reject) => {
+      const provider = new firebase.auth.GithubAuthProvider();
+      this.afAuth.signInWithPopup(provider).then(
+        res => {
+          resolve(res);
+        },
+        err => {
+          console.log(err);
+          reject(err);
+        }
+      );
+    });
+  }
+
+  // Twitter login
+  doTwitterLogin() {
+    return new Promise<any>((resolve, reject) => {
+      const provider = new firebase.auth.TwitterAuthProvider();
+      this.afAuth.signInWithPopup(provider).then(
+        res => {
+          resolve(res);
+        },
+        err => {
+          console.log(err);
+          reject(err);
+        }
+      );
+    });
+  }
+
+  // Google login
+  doGoogleLogin() {
+    return new Promise<any>((resolve, reject) => {
+      const provider = new firebase.auth.GoogleAuthProvider();
+      provider.addScope('profile');
+      provider.addScope('email');
+      this.afAuth.signInWithPopup(provider).then(
+        res => {
+          resolve(res);
+        },
+        err => {
+          console.log(err);
+          reject(err);
+        }
+      );
+    });
+  }
+
+  // Register
+  doRegister(value) {
+    return new Promise<any>((resolve, reject) => {
+      firebase
+        .auth()
+        .createUserWithEmailAndPassword(value.email, value.password)
+        .then(
+          res => {
+            resolve(res);
+          },
+          err => reject(err)
+        );
+    });
+  }
+
+  // Login
+  doLogin(value) {
+    return new Promise<any>((resolve, reject) => {
+      firebase
+        .auth()
+        .signInWithEmailAndPassword(value.email, value.password)
+        .then(
+          res => {
+            resolve(res);
+          },
+          err => reject(err)
+        );
+    });
+  }
+
+  // Logout
+  doLogout() {
+    return new Promise<void>((resolve, reject) => {
+      if (firebase.auth().currentUser) {
+        localStorage.removeItem('currentUser');
+        localStorage.removeItem('remember');
+        this.afAuth.signOut();
+        resolve();
+      } else {
+        localStorage.removeItem('currentUser');
+        resolve();
+      }
+    });
+  }
+}

src/app/_services/chart.api.ts

@@ -0,0 +1,66 @@
+import { Injectable } from '@angular/core';
+import { Observable, of, throwError } from 'rxjs';
+import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
+import { catchError, tap, map } from 'rxjs/operators';
+
+const httpOptions = {
+  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
+};
+
+@Injectable()
+export class ChartApiService {
+
+  apiBaseURL = 'assets/data';
+  loadDataURL = null;
+  loadSalesDataURL = null;
+  loadEcommerceDataURL = null;
+  loadStatisticsDataURL = null;
+  loadTimelineDataURL = null;
+  loadInvoiceDataURL = null;
+  constructor(private http: HttpClient) {
+    this.loadDataURL = `${this.apiBaseURL}/chartist/charts/chartist.json`;
+    this.loadSalesDataURL = `${this.apiBaseURL}/dashboard/sales/chartist.json`;
+    this.loadEcommerceDataURL = `${this.apiBaseURL}/dashboard/ecommerce/chartist.json`;
+    this.loadStatisticsDataURL = `${this.apiBaseURL}/advancecard/statistics/chartist.json`;
+    this.loadStatisticsDataURL = `${this.apiBaseURL}/advancecard/statistics/chartist.json`;
+    this.loadTimelineDataURL = `${this.apiBaseURL}/user-profile/user-profile.json`;
+    this.loadInvoiceDataURL = `${this.apiBaseURL}/invoice-summary/invoice-summary.json`;
+  }
+  private handleError(error: HttpErrorResponse) {
+    if (error.error instanceof ErrorEvent) {
+      // Error
+      console.error('error:', error.error.message);
+    } else {
+      // Error
+      console.error(
+        `Api server returned ${error.status}, ` +
+        `error body: ${error.error}`);
+    }
+    // throwError is observable
+    return throwError('Error has happened');
+  }
+
+  private extractData(res: Response) {
+    const body = res;
+    return body || {};
+  }
+
+  getChartistData(): Observable<any> {
+    return this.http.get(this.loadDataURL, httpOptions);
+  }
+  getSalesData(): Observable<any> {
+    return this.http.get(this.loadSalesDataURL, httpOptions);
+  }
+  getEcommerceData(): Observable<any> {
+    return this.http.get(this.loadEcommerceDataURL, httpOptions);
+  }
+  getStatisticsData(): Observable<any> {
+    return this.http.get(this.loadStatisticsDataURL, httpOptions);
+  }
+  getTimelineData(): Observable<any> {
+    return this.http.get(this.loadTimelineDataURL, httpOptions);
+  }
+  getInvoiceData(): Observable<any> {
+    return this.http.get(this.loadInvoiceDataURL, httpOptions);
+  }
+}

src/app/_services/country.service.ts

@@ -0,0 +1,105 @@
+import {Injectable, PipeTransform} from '@angular/core';
+
+import {BehaviorSubject, Observable, of, Subject} from 'rxjs';
+import {COUNTRIES, Country} from '../content/table/boostraptables/ngxboostraptables/countries';
+import {DecimalPipe} from '@angular/common';
+import {debounceTime, delay, switchMap, tap} from 'rxjs/operators';
+import {SortDirection} from '../_directives/sortable.directive';
+
+interface SearchResult {
+  countries: Country[];
+  total: number;
+}
+
+interface State {
+  page: number;
+  pageSize: number;
+  searchTerm: string;
+  sortColumn: string;
+  sortDirection: SortDirection;
+}
+
+function compare(v1, v2) {
+  return v1 < v2 ? -1 : v1 > v2 ? 1 : 0;
+}
+
+function sort(countries: Country[], column: string, direction: string): Country[] {
+  if (direction === '') {
+    return countries;
+  } else {
+    return [...countries].sort((a, b) => {
+      const res = compare(a[column], b[column]);
+      return direction === 'asc' ? res : -res;
+    });
+  }
+}
+
+function matches(country: Country, term: string, pipe: PipeTransform) {
+  return country.firstname.toLowerCase().includes(term.toLowerCase())
+  || country.lastname.toLowerCase().includes(term.toLowerCase())
+  || country.username.toLowerCase().includes(term.toLowerCase());
+ }
+
+@Injectable({providedIn: 'root'})
+export class CountryService {
+  private _loading$ = new BehaviorSubject<boolean>(true);
+  private _search$ = new Subject<void>();
+  private _countries$ = new BehaviorSubject<Country[]>([]);
+  private _total$ = new BehaviorSubject<number>(0);
+
+  private _state: State = {
+    page: 1,
+    pageSize: 4,
+    searchTerm: '',
+    sortColumn: '',
+    sortDirection: ''
+  };
+
+  constructor(private pipe: DecimalPipe) {
+    this._search$.pipe(
+      tap(() => this._loading$.next(true)),
+      debounceTime(200),
+      switchMap(() => this._search()),
+      delay(200),
+      tap(() => this._loading$.next(false))
+    ).subscribe(result => {
+      this._countries$.next(result.countries);
+      this._total$.next(result.total);
+    });
+
+    this._search$.next();
+  }
+
+  get countries$() { return this._countries$.asObservable(); }
+  get total$() { return this._total$.asObservable(); }
+  get loading$() { return this._loading$.asObservable(); }
+  get page() { return this._state.page; }
+  get pageSize() { return this._state.pageSize; }
+  get searchTerm() { return this._state.searchTerm; }
+
+  set page(page: number) { this._set({page}); }
+  set pageSize(pageSize: number) { this._set({pageSize}); }
+  set searchTerm(searchTerm: string) { this._set({searchTerm}); }
+  set sortColumn(sortColumn: string) { this._set({sortColumn}); }
+  set sortDirection(sortDirection: SortDirection) { this._set({sortDirection}); }
+
+  private _set(patch: Partial<State>) {
+    Object.assign(this._state, patch);
+    this._search$.next();
+  }
+
+  private _search(): Observable<SearchResult> {
+    const {sortColumn, sortDirection, pageSize, page, searchTerm} = this._state;
+
+    // 1. sort
+    let countries = sort(COUNTRIES, sortColumn, sortDirection);
+
+    // 2. filter
+    countries = countries.filter(country => matches(country, searchTerm, this.pipe));
+    const total = countries.length;
+
+    // 3. paginate
+    countries = countries.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize);
+    return of({countries, total});
+  }
+}

src/app/_services/device-detector.service.ts

@@ -0,0 +1,86 @@
+import { PLATFORM_ID, Inject , Injectable} from '@angular/core'
+import { isPlatformBrowser } from '@angular/common'
+import { DeviceInfo, DevicePlatform, DeviceOs, DeviceMobile, DeviceTablet } from './device-detector'
+
+@Injectable({
+  providedIn: 'root'
+})
+
+export class DeviceDetectorService {
+  userAgent: string
+
+  constructor(@Inject(PLATFORM_ID) private platformId) {
+    this.userAgent = isPlatformBrowser(this.platformId) ? window.navigator.userAgent.toLowerCase() : ''
+  }
+
+  private find(match) {
+    return this.userAgent.indexOf(match) !== -1
+  }
+
+  private findMatch(type) {
+    return Object.entries(type).find(([key, val]) => !!val) || []
+  }
+
+  private deviceOS() {
+    const isWindows = this.find('windows')
+    const isIos = this.deviceShared()[DeviceMobile.Iphone] || this.deviceShared()[DeviceTablet.Ipad]
+
+    return {
+      [DeviceOs.Windows]: isWindows,
+      [DeviceOs.Macos]: !isIos && this.find('mac'),
+      [DeviceOs.Android]: !isWindows && this.find('android'),
+      [DeviceOs.Ios]: isIos,
+      [DeviceOs.Blackberry]: this.find('blackberry') || this.find('bb10'),
+      [DeviceOs.Fxos]: (this.find('(mobile') || this.find('(tablet')) && this.find(' rv:')
+    }
+  }
+
+  private deviceShared() {
+    return {
+      [DeviceMobile.Iphone]: !this.find('windows') && this.find('iphone'),
+      [DeviceTablet.Ipad]: this.find('ipad') || navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1,
+    }
+  }
+
+  private deviceMobile() {
+    return {
+      [DeviceMobile.Iphone]: this.deviceShared()[DeviceMobile.Iphone],
+      [DeviceMobile.AndroidPhone]: this.deviceOS()[DeviceOs.Android] && this.find('mobile'),
+      [DeviceMobile.WindowsPhone]: this.deviceOS()[DeviceOs.Windows] && this.find('phone'),
+      [DeviceMobile.BlackberryPhone]: this.deviceOS()[DeviceOs.Blackberry] && !this.find('tablet'),
+      [DeviceMobile.Meego]: this.find('meego'),
+      [DeviceMobile.FxosPhone]: this.deviceOS()[DeviceOs.Fxos] && this.find('mobile')
+    }
+  }
+
+  private deviceTablet() {
+    return {
+      [DeviceTablet.Ipad]: this.deviceShared()[DeviceTablet.Ipad],
+      [DeviceTablet.AndroidTablet]: this.deviceOS()[DeviceOs.Android] && !this.find('mobile'),
+      [DeviceTablet.BlackberryTablet]: this.deviceOS()[DeviceOs.Blackberry] && this.find('tablet'),
+      [DeviceTablet.WindowsTablet]: this.deviceOS()[DeviceOs.Windows] && (this.find('touch') && !this.deviceMobile()[DeviceMobile.WindowsPhone]),
+      [DeviceTablet.FxosTablet]: this.deviceOS()[DeviceOs.Fxos] && this.find('tablet'),
+    }
+  }
+
+  isMobile() {
+    return this.findMatch(this.deviceMobile()).length > 0
+  }
+
+  isTablet() {
+    return this.findMatch(this.deviceTablet()).length > 0
+  }
+
+  isDesktop() {
+    return !this.isTablet() && !this.isMobile()
+  }
+
+  getDeviceInfo(): DeviceInfo {
+    const touchDevices = this.findMatch({ ...this.deviceMobile(), ...this.deviceTablet() })
+    return {
+      platform: this.isDesktop() ? DevicePlatform.Desktop : (this.isMobile() ? DevicePlatform.Mobile : DevicePlatform.Tablet),
+      os: this.findMatch(this.deviceOS())[0],
+      device: touchDevices.length ? touchDevices[0] : DevicePlatform.Desktop
+    }
+  }
+}

src/app/_services/device-detector.ts

@@ -0,0 +1,38 @@
+export enum DevicePlatform {
+    Mobile = 'mobile',
+    Tablet = 'tablet',
+    Desktop = 'desktop'
+  }
+  
+  export enum DeviceOs {
+    Ios = 'ios',
+    Android = 'android',
+    Macos = 'macos',
+    Windows = 'windows',
+    Blackberry = 'blackberry',
+    Fxos = 'fxos'
+  }
+  
+  export enum DeviceMobile {
+    AndroidPhone = 'androidPhone',
+    Iphone = 'iphone',
+    WindowsPhone = 'windowsPhone',
+    BlackberryPhone = 'blackberryPhone',
+    Meego = 'meego',
+    FxosPhone = 'fxosPhone'
+  }
+  
+  export enum DeviceTablet {
+    Ipad = 'ipad',
+    AndroidTablet = 'androidTablet',
+    BlackberryTablet = 'blackberryTablet',
+    WindowsTablet = 'windowsTablet',
+    FxosTablet = 'fxosTablet'
+  }
+  
+  export interface DeviceInfo {
+    platform: DevicePlatform
+    os: DeviceOs | string
+    device: DeviceMobile | DeviceTablet | string
+  }
+  

src/app/_services/geocoding.service.ts

@@ -0,0 +1,56 @@
+import { Injectable } from '@angular/core';
+import { MapsAPILoader } from '@agm/core';
+import { from } from 'rxjs';
+import { tap, map, switchMap } from 'rxjs/operators';
+import { Observable, of } from 'rxjs';
+import { Location } from '../content/maps/services/services.component';
+
+declare var google: any;
+
+@Injectable({
+  providedIn: 'root'
+})
+export class GeocodingService {
+  private geocoder: any;
+
+  constructor(private mapLoader: MapsAPILoader) {}
+
+  private initGeocoder() {
+    console.log('Init geocoder!');
+    this.geocoder = new google.maps.Geocoder();
+  }
+
+  private waitForMapsToLoad(): Observable<boolean> {
+    if (!this.geocoder) {
+      return from(this.mapLoader.load()).pipe(
+        tap(() => this.initGeocoder()),
+        map(() => true)
+      );
+    }
+    return of(true);
+  }
+
+  geocodeAddress(location: string): Observable<Location> {
+    console.log('Start geocoding!');
+    return this.waitForMapsToLoad().pipe(
+      // filter(loaded => loaded),
+      switchMap(() => {
+        return new Observable<Location>(observer => {
+          this.geocoder.geocode({ address: location }, (results, status) => {
+            if (status === google.maps.GeocoderStatus.OK) {
+              console.log('Geocoding complete!');
+              observer.next({
+                lat: results[0].geometry.location.lat(),
+                lng: results[0].geometry.location.lng()
+              });
+            } else {
+              console.log('Error - ', results, ' & Status - ', status);
+              observer.next({ lat: 0, lng: 0 });
+            }
+            observer.complete();
+          });
+        });
+      })
+    );
+  }
+}

src/app/_services/navbar.service.ts

@@ -0,0 +1,24 @@
+import { Injectable } from "@angular/core";
+
+@Injectable()
+export class NavbarService {
+  private mouseInMenuRegion = false;
+  private fixedMenu = false;
+  constructor() {}
+
+  isMouseInRegion() {
+    return this.mouseInMenuRegion;
+  }
+
+  setMouseInRegion(flag) {
+    this.mouseInMenuRegion = flag;
+  }
+
+  isFixedMenu() {
+    return this.fixedMenu;
+  }
+
+  setFixedMenu(flag) {
+    this.fixedMenu = flag;
+  }
+}

src/app/_services/ng-select-data.service.ts

@@ -0,0 +1,37 @@
+import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+import { delay } from 'rxjs/operators';
+import { HttpClient } from '@angular/common/http';
+
+export interface City {
+  item_id: number;
+  item_text: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class NgSelectDataService {
+
+  constructor(private http: HttpClient) { }
+
+  getPeople(term: string = null): Observable<City[]> {
+      let items = getMockCity();
+      if (term) {
+          items = items.filter(x => x.item_text.toLocaleLowerCase().indexOf(term.toLocaleLowerCase()) > -1);
+      }
+      return of(items).pipe(delay(500));
+  }
+}
+
+function getMockCity() {
+  return [
+      { item_id: 1, item_text: 'Alaska' },
+      { item_id: 2, item_text: 'California' },
+      { item_id: 3, item_text: 'Colorado' },
+      { item_id: 4, item_text: 'New Mexico' },
+      { item_id: 5, item_text: 'Alabama' },
+      { item_id: 6, item_text: 'Connecticut' },
+      { item_id: 7, item_text: 'New York' }
+  ];
+}

src/app/_services/quill-initialize-service.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { QuillInitializeServiceService } from './quill-initialize-service.service';
+
+describe('QuillInitializeServiceService', () => {
+  let service: QuillInitializeServiceService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(QuillInitializeServiceService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/_services/quill-initialize-service.service.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import Quill from 'quill';
+import QuillAutoLink from '../content/applications/quill/quillAutolinks';
+@Injectable({
+  providedIn: 'root'
+})
+export class QuillInitializeServiceService {
+
+  constructor() { 
+    var Link = Quill.import('formats/link');
+    Link.sanitize = (url) => {
+      if(url.indexOf("http") <= -1){
+        url = "https://" + url;
+      }
+      return url;
+    }
+    Quill.register('modules/autoLink', QuillAutoLink);
+  }
+
+}

src/app/_services/table-api.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { TableApiService } from './table-api.service';
+
+describe('TableApiService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: TableApiService = TestBed.get(TableApiService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/_services/table-api.service.ts

@@ -0,0 +1,99 @@
+import { Injectable } from '@angular/core';
+import { Observable, of, throwError } from 'rxjs';
+import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
+import { catchError, tap, map } from 'rxjs/operators';
+
+const httpOptions = {
+  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
+};
+@Injectable({
+  providedIn: 'root'
+})
+export class TableApiService {
+
+  apiBaseURL = 'assets/data';
+  loadEcommerceTableDataURL = null;
+  loadInvoiceTableDataURL = null;
+  loadBasicTableDataURL = null;
+  loadTableBorderDataURL = null;
+  loadTableStylingDataURL = null;
+  loadTableApiDataURL = null;
+  loadTableInitialisationDataURL = null;
+  loadStylingDataURL = null;
+  loadTableButtonDataURL = null;
+  loadTableExportDataURL = null;
+  loadTableHiddenDataURL = null;
+  loadTableNgxDataURL = null;
+   constructor(private http: HttpClient) {
+    this.loadEcommerceTableDataURL = `${this.apiBaseURL}/dashboard/ecommerce/datatable.json`;
+    this.loadInvoiceTableDataURL = `${this.apiBaseURL}/invoice/invoicelist/invoicetable.json`;
+    this.loadBasicTableDataURL = `${this.apiBaseURL}/boostraptable/basictable.json`;
+    this.loadTableBorderDataURL = `${this.apiBaseURL}/boostraptable/tableborder.json`;
+    this.loadTableStylingDataURL = `${this.apiBaseURL}/boostraptable/tablestyling.json`;
+    this.loadTableApiDataURL = `${this.apiBaseURL}/datatables/tableapi/tableapi.json`;
+    this.loadTableInitialisationDataURL = `${this.apiBaseURL}/datatables/tableinitialisation/tableinitialisation.json`;
+    this.loadStylingDataURL = `${this.apiBaseURL}/datatables/tablestyling/tablestyling.json`;
+    this.loadTableButtonDataURL = `${this.apiBaseURL}/datatables/buttons/tablebuttons.json`;
+    this.loadTableExportDataURL = `${this.apiBaseURL}/datatables/html5dataexport/html5dataexport.json`;
+    this.loadTableHiddenDataURL = `${this.apiBaseURL}/datatables/hiddentable/hiddentable.json`;
+    this.loadTableNgxDataURL = `${this.apiBaseURL}/boostraptable/ngxboostraptables.json`;
+  }
+  private handleError(error: HttpErrorResponse) {
+    if (error.error instanceof ErrorEvent) {
+      // Error
+      console.error('error:', error.error.message);
+    } else {
+      // Error
+      console.error(
+        `Api server returned ${error.status}, ` +
+        `error body: ${error.error}`);
+    }
+    // throwError is observable
+    return throwError('Error has happened');
+  }
+
+  private extractData(res: Response) {
+    const body = res;
+    return body || {};
+  }
+
+
+  getEcommerceTableData(): Observable<any> {
+    return this.http.get(this.loadEcommerceTableDataURL, httpOptions);
+  }
+
+  getInvoiceTableData(): Observable<any> {
+    return this.http.get(this.loadInvoiceTableDataURL, httpOptions);
+  }
+  getBasicTableData(): Observable<any> {
+    return this.http.get(this.loadBasicTableDataURL, httpOptions);
+  }
+  getTableBorderData(): Observable<any> {
+    return this.http.get(this.loadTableBorderDataURL, httpOptions);
+  }
+  getTableStylingData(): Observable<any> {
+    return this.http.get(this.loadTableStylingDataURL, httpOptions);
+  }
+  getTableApiData(): Observable<any> {
+    return this.http.get(this.loadTableApiDataURL, httpOptions);
+  }
+  getTableInitialisationData(): Observable<any> {
+    return this.http.get(this.loadTableInitialisationDataURL, httpOptions);
+  }
+  getStylingData(): Observable<any> {
+    return this.http.get(this.loadStylingDataURL, httpOptions);
+  }
+  getTableButtonData(): Observable<any> {
+    return this.http.get(this.loadTableButtonDataURL, httpOptions);
+  }
+  getTableExportData(): Observable<any> {
+    return this.http.get(this.loadTableExportDataURL, httpOptions);
+  }
+  getTableHiddenData(): Observable<any> {
+    return this.http.get(this.loadTableHiddenDataURL, httpOptions);
+  }
+  getTableNgxData(): Observable<any> {
+    return this.http.get(this.loadTableNgxDataURL, httpOptions);
+  }
+}
+

src/app/_services/tableexcel.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { TableexcelService } from './tableexcel.service';
+
+describe('TableexcelService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: TableexcelService = TestBed.get(TableexcelService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/_services/tableexcel.service.ts

@@ -0,0 +1,37 @@
+import { Injectable } from '@angular/core';
+import * as FileSaver from 'file-saver';
+import * as XLSX from 'xlsx';
+
+const EXCEL_TYPE =
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
+const EXCEL_EXTENSION = '.xlsx';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TableexcelService {
+  constructor() { }
+  public exportAsExcelFile(json: any[], excelFileName: string): void {
+    const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);
+    console.log('worksheet', worksheet);
+    const workbook: XLSX.WorkBook = {
+      Sheets: { data: worksheet },
+      SheetNames: ['data']
+    };
+    const excelBuffer: any = XLSX.write(workbook, {
+      bookType: 'xlsx',
+      type: 'array'
+    });
+    this.saveAsExcelFile(excelBuffer, excelFileName);
+  }
+
+  private saveAsExcelFile(buffer: any, fileName: string): void {
+    const data: Blob = new Blob([buffer], {
+      type: EXCEL_TYPE
+    });
+    FileSaver.saveAs(
+      data,
+      fileName + '_export_' + new Date().getTime() + EXCEL_EXTENSION
+    );
+  }
+}