I am currently working on a map application where users can input coordinates (latitude and longitude). I want to add a marker to the map when the "Add Waypoint" button is clicked, but nothing happens. Strangely, entering the values manually into the .ts file works and updates when the button is pressed.
Here is the content of my main.component.ts file:
import { Component, OnInit } from '@angular/core';
import { ThemePalette } from '@angular/material/core';
import { ProgressBarMode } from '@angular/material/progress-bar';
import { Waypoint } from '../models/Waypoints';
@Component({
selector: 'app-main',
templateUrl: './main.component.html',
styleUrls: ['./main.component.scss']
})
export class MainComponent implements OnInit {
mode: ProgressBarMode = 'determinate';
color: ThemePalette = 'primary'
public latValue = 38.267730;
public lonValue = -110.720120;
constructor() { }
waypoints: Waypoint[];
addWaypoint() {
this.waypoints.push(
{
lat: this.latValue,
lon: this.lonValue
}
)
}
ngOnInit(): void {
}
}
This is how my main.component.html file looks like:
<mat-grid-list cols = "8" rowHeight = 350px>
<mat-grid-tile colspan = "4" rowspan="2">
<mat-card class = "colspan-4 rowspan-2">
<mat-card-title>Waypoints</mat-card-title>
<mat-card-content>
<mat-grid-list cols = "3">
<mat-grid-tile>
<mat-form-field class="example-form-field" appearance="fill">
<mat-label>Latitude</mat-label>
<input matInput type="text" [(ngModel)]="latValue">
<button *ngIf="latValue" matSuffix mat-icon-button aria-label="Clear" (click)="latValue=0">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
</mat-grid-tile>
<mat-grid-tile>
<mat-form-field class="example-form-field" appearance="fill">
<mat-label>Longitude</mat-label>
<input matInput type="text" [(ngModel)]="lonValue">
<button *ngIf="lonValue" matSuffix mat-icon-button aria-label="Clear" (click)="lonValue=0">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
</mat-grid-tile>
<mat-grid-tile>
<button mat-button color="primary" (click)="addWaypoint()">Add Waypoint</button>
</mat-grid-tile>
<mat-grid-tile colspan = "3" rowspan = "2">
<mat-list>
<div mat-subheader>Waypoints</div>
<mat-list-item *ngFor="let waypoint of waypoints; let i = index">
<mat-icon mat-list-icon>place</mat-icon>
<div mat-line>Waypoint {{i}}</div>
<div mat-line>{{waypoint.lat}}, {{waypoint.lon}}</div>
</mat-list-item>
</mat-list>
</mat-grid-tile>
</mat-grid-list>
</mat-card-content>
</mat-card>
</mat-grid-tile>
</mat-grid-list>
The contents of my Waypoints.ts file are as follows:
export class Waypoint {
lat:number;
lon:number;
}
If I use hardcoded data, here is what my addWaypoint function looks like:
addWaypoint() {
this.waypoints = [
{
lat: 38.267730,
lon: -110.720120
},
{
lat: 40.267730,
lon: -112.720120
}
]
}