Angular array variable not updating

Question

I am currently making a map app that allows the user to type in coordinates (latitude and longitude). I want a marker to be added to the map when I hit the "Add Waypoint" button, but when I do, nothing happens. However, If i manually enter the waypoint values into the .ts file, they do update when the "Add Waypoint" button is pressed.

Here is 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 {
  }

}

Here is my main.component.html file:

<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>

Here is my Waypoints.ts file:

export class Waypoint {
    lat:number;
    lon:number;
}

If I hardcode the data, this is what my addWaypoint function looks like:

addWaypoint() {
    this.waypoints = [
      {
        lat: 38.267730,
        lon: -110.720120
      },
      {
        lat: 40.267730,
        lon: -112.720120
      }
    ]
}

Any error in console? How do you assign your hard coded waypoint when it works? — ghybs
– ghybs, Commented Jan 18, 2022 at 2:02
There is no error in the console. I have added the hard coded function in an edit to my original question. — Brandon Pyle
– Brandon Pyle, Commented Jan 18, 2022 at 2:24

Will · Accepted Answer · 2022-01-18 02:46:17Z

1

The default way that Angular tracks changes is by reference. It's not enough to push data onto the array. You have to set the array to a new array, change the default change detection strategy, or manually tell Angular to detect changes.

const waypoints = [...this.waypoints];
waypoints.push(...);
this.waypoints = waypoints;

Docs: https://angular.io/api/core/ChangeDetectorRef#usage-notes

answered Jan 18, 2022 at 2:46

Will

3963 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular array variable not updating

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related