How to restrict Google Maps search results to only one country properly?

Question

I am developing an application, in Ionic, where you can plan a trip with a start address and and end address. However I want to limit this feature to only one country. Before writing I have been searching for solutions on the internet, but none of them worked for me.

Have tried these suggestions:

https://stackoverflow.com/a/8282093/8130808

https://stackoverflow.com/a/10170421/8130808

Here is how I have tried to approach it:

 //Places markers and displays a route, so the user can accept the current placing
  newRoutePlaceMarks(place: any): void {
    var googleDiplay = new google.maps.DirectionsRenderer({ draggable: true });

    var route = this.directionsDisplay;
    //A bit of a hack, sadly Typescript and google maps arent the best of buddies
    this.directionsService.route({
      origin: this.routeStart,
      destination: this.routeEnd,
      travelMode: 'DRIVING',
    }, function (response, status) {
      if (status === 'OK') {
        console.log("status is OK trying to put directions up");

        //The reason why I've set the addListener before the actual route is so it gets triggered
        //on the creation of the route. Had some problem with figuring out how to actually handle
        //the data when on the route creation, as this response function is in strict mode, and outside

        google.maps.event.addListener(route, "directions_changed", function () {
          console.log("Route changed");
          this.global = ShareService.getInstance();
          this.directions = route.getDirections();
          this.metersToDist = this.directions.routes[0].legs[0].distance.value;
          this.timeToDist = this.directions.routes[0].legs[0].duration.value;
          this.startAddress = this.directions.routes[0].legs[0].start_address;
          this.startCord = this.directions.routes[0].legs[0].start_location;
          this.endAddress = this.directions.routes[0].legs[0].end_address;
          this.endCord = this.directions.routes[0].legs[0].end_location;
          this.global.setMetersToDist(this.metersToDist);
          this.global.setTimeToDist(this.timeToDist);
          this.global.setStartAddress(this.startAddress);
          this.global.setStartCord(this.startCord);
          this.global.setEndAddress(this.endAddress);
          this.global.setEndCord(this.endCord);


          var options = {
            types:  ['geocode'],
            componentRestrictions: { country: "dk" }
          };
          google.maps.places.Autocomplete(this.startAddress, options);
        });


        //The actual initialiser for the route
        route.setDirections(response);

      } else {
        alert('Could not display route ' + status);
      }
    });
  }

My problem is that the input is HTTPELEMENT, I get the input from an alert dialog

newRouteInput() {

    let alert = this.alertCtrl.create({
      title: 'New route',
      inputs: [
        {
          name: 'routeStart',
          placeholder: 'Start of route'
        },
        {
          name: 'routeEnd',
          placeholder: 'End of route'
        }
      ],
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          handler: data => {
            console.log('Cancel clicked');
          }
        },
        {
          text: 'Debug start and end',
          handler: data => {
            if (data.username !== "undefined") {
              console.log(data.routeStart + " " + data.routeEnd);
              this.routeStart = "Brøndby Strand";
              this.routeEnd = "Hvidovre";
              this.newRoutePlaceMarks(this.map);
              this.routeButton = false;

            } else {
              return false;
            }
          }
        },
        {
          text: 'Place route markers',
          handler: data => {
            if (data.username !== "undefined") {
              this.routeStart = data.routeStart;
              this.routeEnd = data.routeEnd;
              this.newRoutePlaceMarks(this.map);
              this.routeButton = false;
            } else {
              console.log(data.routeStart + " " + data.routeEnd);
              return false;
            }
          }
        }
      ]
    });
    alert.present();
  }

When I run this I get an error because of this.startAddress. It's not null, it contains the start address:

InvalidValueError: not an instance of HTMLInputElement