angularangular19

Angular 19: Property 'mutate' does not exist on type 'WritableSignal<Vehicle>'


I am using Angular 19 and trying to utilize the mutate method with a signal holding a Vehicle object. However, I encounter the following error:

Property 'mutate' does not exist on type 'WritableSignal<Vehicle>'.

Here is my code snippet:

import { Component, signal, computed, effect } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

export interface Vehicle {
  id: number;
  name: string;
  price: number;
}

@Component({
  selector: 'app-root',
  imports: [FormsModule],
  template: `
    <h1>{{ quantity() }}</h1>
    <select [ngModel]="quantity()" (change)="onSelectQ($event)">
      <option *ngFor="let x of quantityArr()">{{ x }}</option>
    </select>
    <div>Vehicle: {{ selectedVehicle().name }}</div>
    <div>Vehicle Price: {{ selectedVehicle().price }}</div>
    <div>Total: {{ exPrice() }}</div>
  `,
})
export class App {
  quantity = signal<number>(1);
  quantityArr = signal<number[]>([1, 2, 3, 4, 5, 6, 7, 8, 9]);
  vehicles = signal<Vehicle[]>([
    { id: 1, name: 'Lexus', price: 100 },
    { id: 2, name: 'Zen', price: 200 },
    { id: 3, name: 'Duster', price: 300 },
  ]);
  selectedVehicle = signal<Vehicle>(this.vehicles()[0]);

  exPrice = computed(() => this.selectedVehicle().price * this.quantity());

  constructor() {
    // Trying to use mutate here:
    this.selectedVehicle.mutate((v: Vehicle) => (v.price = v.price * 1.2));
  }

  quantityEffect = effect(() => {
    console.log(this.quantity());
  });

  onSelectQ(event: any) {
    this.quantity.set(Number(event.target.value));
  }
}

bootstrapApplication(App);

package.json

{
  "dependencies": {
    "@angular/core": "^19.0.0",
    "@angular/forms": "^19.0.0",
    "@angular/platform-browser": "^19.0.0",
    "rxjs": "^7.8.1",
    "zone.js": "~0.15.0"
  },
  "devDependencies": {
    "@angular/cli": "^19.0.0",
    "@angular/compiler-cli": "^19.0.0",
    "typescript": "^5.6.3"
  }
}

Why does Angular 19's mutate method not work with WritableSignal<Vehicle>? What is the proper way to update properties of a signal object in Angular?

Here is video reference
I am Learning angular signal with version 19 and I am following below video

https://www.youtube.com/watch?v=oqYQG7QMdzw&list=PLErOmyzRKOCr07Kcnx75Aqh6PWSbIokPB&index=1


Solution

  • The video you are referring to was uploaded 1.8 months ago. Since then, the Angular team has significantly improved the Signal, and this method has been removed from Angular 18.

    Mutate: This method was used to update signal value without replacing its original value, you can find more info by visiting Angular v16 Mutate.

    Now we have two methods to update the signal value

    Above both methods have slightly distant use cases over when to use which but both are being used for updating signal value, You can find more info from Angular's official documentation Angular-19 Singal

    Thanks.