Angular 2/4 webservice with SOAP-WSDL request

Still I am learning angular2., I am trying to learn.,how to send SOAP request to a web service, with a WSDL.I was searching for some examples and found one.I have tried to implement that in my sample project.And I think .,i didnt implement properly

can someone help me to learn ?

 app.component.ts

import {Injectable, Component } from '@angular/core';
import { Http, Response} from '@angular/http';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html'
})
export class AppComponent {
soapCall() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open('POST', 'http://localhost/webservices/voltage-info-services/wsdl/sgcc3.wsdl', true);
    var input_element = <HTMLInputElement> document.getElementById("choosenNumber");
    console.log("chVal : " + this.chVal);
    this.choosenNumberValue = this.chVal;
    //the following variable contains my xml soap request (that you can get thanks to SoapUI for example)
    var sr =
        `<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:mat="http://mathsutility.test.com/">
      <soapenv:Header/>
      <soapenv:Body>
        <mat:carreNombre>
            <arg0>` + this.choosenNumberValue + `</arg0>
        </mat:carreNombre>
      </soapenv:Body>
    </soapenv:Envelope>`;

    xmlhttp.onreadystatechange =  () => {
        if (xmlhttp.readyState == 4) {
            if (xmlhttp.status == 200) {
                var xml = xmlhttp.responseXML;
                this.response_number = parseInt(xml.getElementsByTagName("return")[0].childNodes[0].nodeValue); //Here I'm getting the value contained by the <return> node
                console.log(this.response_number); //I'm printing my result square number
            }
        }
    }
    // Send the POST request
    xmlhttp.setRequestHeader('Content-Type', 'text/xml');
    xmlhttp.responseType = "document";
    xmlhttp.send(sr);
  }

 }