操作按钮调用服务网络

Question

I am beginner in angular and i want to add to add button an action that invokes a web service that sends itself to a node server to add a user. i work on a template (nebular-ngx) . enter link description here

this the code of my add button with angular4

 add: {
  addButtonContent: '<i class="nb-plus"></i>',
  createButtonContent: '<i class="nb-checkmark"></i>',
  cancelButtonContent: '<i class="nb-close"></i>',
},

i wonna add an action who invoke a service web and send it to a node server

this is my hole code

import { Component } from '@angular/core';
import { LocalDataSource } from 'ng2-smart-table';

import { SmartTableData } from '../../../@core/data/smart-table';

@Component({
selector: 'ngx-smart-table',
templateUrl: './smart-table.component.html',
styles: [`
nb-card {
  transform: translate3d(0, 0, 0);
  }
 `],
 })
  export class SmartTableComponent {

settings = {
 add: {
   addButtonContent: '<i class="nb-plus"></i>',
    createButtonContent: '<i class="nb-checkmark"></i>',
   cancelButtonContent: '<i class="nb-close"></i>',
   },
  edit: {
  editButtonContent: '<i class="nb-edit"></i>',
  saveButtonContent: '<i class="nb-checkmark"></i>',
  cancelButtonContent: '<i class="nb-close"></i>',
  },
  delete: {
  deleteButtonContent: '<i class="nb-trash"></i>',
  confirmDelete: true,
  },
  columns: {
  id: {
    title: 'ID',
    type: 'number',
    },
    firstName: {
    title: ' Name',
    type: 'string',
    },
    email: {
     title: 'E-mail',
    type: 'string',
    },
    password: {
    title: 'password',
    type: 'password',
  },
   },
  };

source: LocalDataSource = new LocalDataSource();

constructor(private service: SmartTableData) {
const data = this.service.getData();
this.source.load(data);
}

onDeleteConfirm(event): void {
if (window.confirm('Are you sure you want to delete?')) {
  event.confirm.resolve();
} else {
  event.confirm.reject();
 }
 }
 }

Answer 1

You can use your button click event to make the service call from component:

<button class="btn btn-primary" (click)="makeServiceCall($event)">Add</button>

In component:

makeServiceCall(e) {
       this.myAngularService.makeHttpRequest().subscribe((response: Response) => {
            // my response here
        }, (error: any) => {
            console.log(error);
        });

}

Inside myAngularService , make use of angular's HttpClient to make the service call:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class myAngularService{
  constructor(private http: HttpClient) { }

  makeHttpRequest() {
      return this.http.get<any>('my_service_url);
  }
}