I cannot pass my variable

Ionic Framework ionic-v3
1

Hello, I was trying to pass my variable from my pag to the component, but i didn’t get. Someone knows?

thanks

2

sample of your code plz!

3

I need to pass my vabiable to google maps component
Home.ts
import { Component } from ‘@angular/core’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})

export class HomePage {

private location: String = “Carmo”;

constructor(){
}

options: any = {
controls: {
compass: true,
myLocationButton: true,
indoorPicker: true,
zoom: true
}
};

onMapClick(e) {
}

onMapReady(e) {
}

search(ev: any) {
let val = ev.target.value;
if (val && val.trim() != ‘’) {
//SHARE ‘val’ TO COMPONENT
alert(val);
}
}

}
Home.html

<google-map (mapClick)=“onMapClick($event)” (mapReady)=“onMapReady($event)” [options]=“options”>
Search

<ion-item>
  <ion-label>Username</ion-label>
  <ion-input (search)="search($event)" type="search"></ion-input>
</ion-item>
GOOGLE MAPS COMPONENT import { Component, Input, Renderer, OnInit, ElementRef, Output, EventEmitter, AfterViewInit } from '@angular/core'; import { Platform } from "ionic-angular"; import { GoogleMap, GoogleMapsEvent, GoogleMaps, LatLng, GoogleMapOptions } from "@ionic-native/google-maps"; import { NativeGeocoder, NativeGeocoderReverseResult, NativeGeocoderForwardResult } from '@ionic-native/native-geocoder';

@Component({
selector: ‘google-map’,
template: ‘’
})

export class GoogleMapComponent implements AfterViewInit {
private mapContainer: HTMLElement;
map: GoogleMap;
myLocation: LatLng;
private isInit: boolean = false;
public myInput: string;

_height: string = ‘100%’;

@Input()
set height(val: string) {
this._height = val;
this.isInit && this.setHeight();
}

get height(): string {
return this._height;
}

_width: string = ‘100%’;
@Input()
set width(val: string) {
this._width = val;
this.isInit && this.setWidth();
}

get width() {
return this._width;
}

@Input()
options: GoogleMapOptions = {
};

@Output()
mapClick: EventEmitter = new EventEmitter();

@Output()
mapReady: EventEmitter = new EventEmitter();

constructor(
private platform: Platform,
private renderer: Renderer,
private el: ElementRef,
private googleMaps: GoogleMaps,
private nativeGeocoder: NativeGeocoder
) { this.mapContainer = el.nativeElement; }

ngAfterViewInit() {
this.setupContainer();
this.platform.ready().then(() => {
this.map = this.googleMaps.create(this.mapContainer, this.options);
this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
this.mapReady.emit(this.map);
this.isInit = true;
this.map.setMyLocationEnabled(true);
let location = this.map.getMyLocation();
location.then((res) => {
this.moveCamera(res.latLng.lat, res.latLng.lng, 15);
});

    // Add Cluster Marker
    var label = document.getElementById("label");
    this.map.addMarkerCluster({
      boundsDraw: true,
      markers: this.dummyData(),
      icons: [
        { min: 2, max: 10, url: "assets/icon/blue.png", anchor: { x: 16, y: 16 } },
        { min: 10, max: 20, url: "assets/icon/yellow.png", anchor: { x: 16, y: 16 } },
        { min: 20, max: 60, url: "assets/icon/red.png", anchor: { x: 24, y: 24 } },
        { min: 60, url: "assets/icon/black.png", anchor: { x: 32, y: 32 } }
      ]
    }).then((markerCluster) => {
      markerCluster.on("resolution_changed", function (prev, newResolution) {
        var self = this;
        label.innerHTML = "&lt;b&gt;zoom = " + self.get("zoom").toFixed(0) + ", resolution = " + self.get("resolution") + "&lt;/b&gt;";
      });
      markerCluster.trigger("resolution_changed");
    });

    let inputSearch = document.getElementById('input');

    //

    //

  });
});

}

ngOnDestroy() {
this.map.remove();
}

private setupContainer() {
this.setWidth();
this.setHeight();

// set display block
this.renderer.setElementStyle(this.mapContainer, 'z-index', '1000');
this.renderer.setElementStyle(this.mapContainer, 'display', 'block');

}

private setWidth() {
this.renderer.setElementStyle(this.mapContainer, ‘width’, this._width);
}

private setHeight() {
this.renderer.setElementStyle(this.mapContainer, ‘height’, this._height);
}

public moveCamera(lat, Lng, zoom) {
this.map.animateCamera({
target: {
lat: lat,
lng: Lng
},
zoom: zoom,
tilt: 20,
duration: 3000
});
}

public searchAdress(adress) {
this.nativeGeocoder.forwardGeocode(adress)
.then((coordinates: NativeGeocoderForwardResult) => {
this.moveCamera(coordinates.latitude, coordinates.longitude, 13);
alert(‘The coordinates are latitude=’ + coordinates.latitude + ’ and longitude=’ + coordinates.longitude);
})
.catch((error: any) => console.log(error));

}

}