I have created an app where users have their addresses listed, and I want to implement a feature that allows me to open Google Maps when clicking on the address.
However, I am currently facing an issue where instead of getting the actual value of {{ this.customer.address }}, it just pastes it as is in the search parameters. What could be going wrong in my code?
Here is the HTML component:
<mat-list-item *ngIf="customer.address" (click)="openExternalUrl()">
<mat-icon class="material-icons-outlined" matListItemIcon>home</mat-icon>
<div matListItemTitle class="property-name">Address:</div>
<div matListItemLine>{{customer.address}}</div>
</mat-list-item>
And here is the corresponding TypeScript code:
getSingleCustomer() {
const id = Number(this.route.snapshot.paramMap.get('id'));
this.customerService.getSingleCustomer(id).subscribe(
data => {
this.customer = data;
},
error => {
console.log('Error', error);
});
}
openExternalUrl(): void {
window.location.href='https://maps.google.com/?q={{this.customer.address}},{{this.customer.city}}';
}