I just started learning angular and started with this tutorial https://www.youtube.com/watch?v=JWhRMyyF7nc (I’m at the end section 2_. I tried to follow everything from and change it angular 17. But I encountered a bug. Basically I have my first project that is sort of wishlist to which you add wishes that are displayed as checkboxes and you check to mark them as fulfilled. And you can select if you want to display only fulfilled, unfulfilled or all wishes. Everything consists of single component. Here’s html of it:

<div class = "containter">

  <form class = "form">
    <div>  
      <label class="infoText">Add your wish! </label>
      <input type="text" class="wishInput" [(ngModel)] = "wishToBeAdded" name ="wishAdder">
    </div>
    <button type="submit" class="submitButton" (click) = "$event.preventDefault(); addWish()">Submit</button>
  </form>


  <div class="selector">
    <select class = "wishSelector" [(ngModel)] = "filterOption">
      <option value = "0">All</option>
      <option value = "1">Fulfilled</option>
      <option value = "2">Unfulfilled</option>
    </select>
  </div>

  <ul class ="wishList">
    <label style="font-weight: 800; font-size: large;">Wishlist:</label>
    <li>
      @for (item of visibleItems; track $index) {
        <label>
          {{$index + 1}}. {{item.wishName}} {{visibleItems[$index].isComplete}}
          <input type="checkbox" class = "checkbox" [checked] = "item.isComplete" (click) = "checkboxToggle(item, $event)">
        </label>
        <div>&NewLine;</div>
      } @empty {
        <label> There are no wishes in wishlist </label>
      }
    </li>
  </ul>

</div>

Here’s typescript code:

import { Component, viewChild } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { WishItem } from '../shared/modules/wishItem';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, FormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  items: WishItem[] = [];
  title = 'My FirstProject';
  wishToBeAdded : string = '';
  filterOption : string = '0'
  
  get visibleItems() : WishItem[] {
    switch(this.filterOption) {
      case "0":
        return this.items;
      case "1":
        return this.items.filter(value => value.isComplete);
      case "2":
        return this.items.filter(value => !value.isComplete);
    }
    return []
  }

  checkboxToggle(item: WishItem, element: any)
  {
    item.isComplete = !item.isComplete;
    this.items.forEach(element => {
      console.log(element.isComplete)
    });
    console.log(this.visibleItems);
  }

  addWish()
  {
    if(this.wishToBeAdded.length>0)
      this.items.push(new WishItem(this.wishToBeAdded));
    this.wishToBeAdded = '';
  }

}

However there is weird situation when the list is selected to display only fulfilled or unfulfilled elements and someone checks or unchecks one of elements. The element stops being displayed because its isComplete is changed but the next element in the list right after it is checked. The value of isComplete attribute of corresponding wishItem is still correct cause I started to print it to see if that’s a problem but it’s not. I don’t know if I’m doing something wrong or is it something about angular 17 because the tutorial is about some earlier version, or I don’t understand something html.

(https://i.sstatic.net/A2sfSsb8.png)

Here’s list of items after I checked test2 element.

After element is checked or unchecked from the list when it’s being filtered there shouldn’t be any change to other elements.