Currently I have been developing an application with ionic 3, In the application I have several market, what I want is that when I click on one I have to show a div that when initializing the app is hidden. he has been arming in this way but it does not work.
<ion-content>
<div id="map"></div>
<div (click)="viaje();" *ngIf="buttonClicked" class="detalle_chofer">
<div class="tiempo_llegada">
<p class="llegada">LLEGANDO EN 2 MIN</p>
</div>
<div>
<img class="chofer" src="assets/imgs/chofer.png" alt="">
<p class="nombre_chofer">IVAN JOEL MORE FLORES</p>
<a class="estrellas" *ngFor="let r of ratingArr">
<ion-icon name="{{r.icon}}" item-left>
</ion-icon>
</a>
</div>
<div class="detalle_auto">
<img class="auto" src="assets/imgs/auto.png" alt="">
<p class="color_auto">TOYOTA</p>
<p class="placa">ABC - 123</p>
</div>
</div>
</ion-content>
is css
.
detalle_chofer {
position: absolute;
background: rgb(0, 0, 0);
width: 100%;
height: 30%;
top: 80%;
z-index: 1;
}
public buttonClicked: boolean = false; //Whatever you want to initialise it as
addMarker(options) {
let markerOptions: MarkerOptions = {
position: new LatLng(options.position.latitude, options.position.longitude),
title: options.title,
icon: options.icon
};
this.map.addMarker(markerOptions).then(marker => {
marker.on(GoogleMapsEvent.MARKER_CLICK)
.subscribe(() => {
var mFound = Object.getOwnPropertySymbols(marker._objectInstance)
.find(e => e.toString() === "Symbol(vars)");
var title = marker._objectInstance[mFound].title;
alert(title);
this.buttonClicked = !this.buttonClicked; //
console.log(this.buttonClicked);
});
});
}
In this image I put the div in true to be able to visualize it