How to retrieve value from matInput and send it via HTTP request?

Question

I've created a dialog in Angular

edit-dialog.component.html

<div id="edit-dialog">
  <table>
  <tbody>
  <tr>
  <td><div mat-dialog-content>
    <mat-form-field class="example-full-width">
      <input matInput placeholder="Nama profil" #input1>
     </mat-form-field>
  </div></td>
  <td><div mat-dialog-content>
    <mat-form-field class="example-full-width">
      <input matInput placeholder="MSISDN" #input2>
     </mat-form-field>
  </div></td>
  <td><div mat-dialog-content>
    <mat-form-field class="example-full-width">
      <input matInput placeholder="Paket aktif" #input3>
     </mat-form-field>
  </div></td>
  <td><div mat-dialog-content>
    <mat-form-field class="example-full-width">
      <input matInput placeholder="IMSI" #input4>
     </mat-form-field>
  </div></td>
  <td>  <div mat-dialog-content>
    <mat-form-field class="example-full-width">
      <input matInput placeholder="ACC" #input5>
     </mat-form-field>
  </div></td>
  </tr>
  <tr>
  <td><div mat-dialog-content>
    <mat-form-field class="example-full-width">
      <input matInput placeholder="HPLMNwAcT" #input6>
     </mat-form-field>
  </div></td>
  <td><div mat-dialog-content>
    <mat-form-field class="example-full-width">
      <input matInput placeholder="OPLMNwAcT" #input7>
     </mat-form-field>
  </div></td>
  <td> <div mat-dialog-content>
    <mat-form-field class="example-full-width">
      <input matInput placeholder="PLMNwAcT" #input8>
     </mat-form-field>
  </div></td>
  <td><div mat-dialog-content>
    <mat-form-field class="example-full-width">
      <input matInput placeholder="PLMNSel" #input9>
     </mat-form-field>
  </div></td>
  <td>  <div mat-dialog-content>
    <mat-form-field class="example-full-width">
      <input matInput placeholder="OPL" #input10>
     </mat-form-field>
  </div></td>
  </tr>
  <tr>
  <td>  <div mat-dialog-content>
    <mat-form-field class="example-full-width">
      <input matInput placeholder="PNN" #input11>
     </mat-form-field>
  </div></td>
  <td>  <div mat-dialog-content>
    <mat-form-field class="example-full-width">
      <input matInput placeholder="SPN" #input12>
     </mat-form-field>
  </div></td>
  <td>  <div mat-dialog-content>
    <mat-form-field class="example-full-width">
      <input matInput placeholder="KI" #input13>
     </mat-form-field>
  </div></td>
  <td>  <div mat-dialog-content>
    <mat-form-field class="example-full-width">
      <input matInput placeholder="OPC" #input14>
     </mat-form-field>
  </div></td>
  <td>&nbsp;</td>
  </tr>
  </tbody>
  </table>
  </div>

  <div class="mat-dialog-actions">
    <button [mat-dialog-close]=null cdkFocusInitials>Cancel</button>
    <button (click)="hello(#input1)" mat-dialog-close cdkFocusInitials>Update</button>
  </div>

edit-dialog.component.ts

import { Component, OnInit, Inject } from '@angular/core';
import { ApiService } from '../app.service';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';

@Component({
  selector: 'app-edit-dialog',
  templateUrl: './edit-dialog.component.html',
  styleUrls: ['./edit-dialog.component.css']
})

// export class EditDialogComponent implements OnInit {
export class EditDialogComponent {

  constructor(
    public dialogRef: MatDialogRef<EditDialogComponent>, private apiService: ApiService,
    @Inject(MAT_DIALOG_DATA) public data: any) { }

  onNoClick(): void {
    this.dialogRef.close();
  }

  hello(msg) {
    window.alert(msg);
  }
}

What I want to know is if the "Update" button is clicked, how to retrieve the MSISDN value and send it via HTTP request?

The latter part will be done like this:

this.apiService.getData('update.php', 'msisdn').then(
      data => {
        // process the data here
      }
    );

app.service.ts

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions, URLSearchParams } from '@angular/http';

@Injectable()
export class ApiService {

  constructor(private http: Http) { }

  BASE_URL = 'http://localhost/esim-cms/';


    public getData(path: string, msisdn: string): Promise<any> {
      var addr = this.BASE_URL + path + "?msidn="+ msisdn;
      return this.http.get(addr).toPromise()
          .then((resp: Response) => {
              let data = resp.json();
              return data;
          });
      }
}

I'm still figuring out how to do the former

Answer 1

Just bind your input with some variable using ngModel and send the value to the server using API like this -

<td><div mat-dialog-content>
    <mat-form-field class="example-full-width">
      <input matInput placeholder="MSISDN" #input2 [(ngModel)]='msisdn'>
     </mat-form-field>
  </div></td>

this.apiService.getData('update.php', this.msisdn).then(
      data => {
        // process the data here
      }
    );

Or

If you are having multiple values to send then you can use Form as well to get and send multiple values to the server.