Why do I have this error? TypeError: Cannot read properties of undefined

My web-app is a wish list. I am learning how to use Angular with this tutorial. I am deploying this locally. The app still works, but anytime I reload the page I get this error in the terminal:

ERROR TypeError: Cannot read properties of undefined (reading 'filter')
at NgModule (C:\Users\ilumi\wishList\src\app\app.html:11:16)
at executeTemplate (C:\Users\ilumi\wishList.angular\cache\20.0.1\wishList\vite\deps_ssr\chunk-V4S3RZ5S.js:7492:5)
at refreshView (C:\Users\ilumi\wishList.angular\cache\20.0.1\wishList\vite\deps_ssr\chunk-V4S3RZ5S.js:8585:7)
at detectChangesInView (C:\Users\ilumi\wishList.angular\cache\20.0.1\wishList\vite\deps_ssr\chunk-V4S3RZ5S.js:8757:5)
at detectChangesInViewIfAttached (C:\Users\ilumi\wishList.angular\cache\20.0.1\wishList\vite\deps_ssr\chunk-V4S3RZ5S.js:8740:3)
at detectChangesInComponent (C:\Users\ilumi\wishList.angular\cache\20.0.1\wishList\vite\deps_ssr\chunk-V4S3RZ5S.js:8733:3)
at detectChangesInChildComponents (C:\Users\ilumi\wishList.angular\cache\20.0.1\wishList\vite\deps_ssr\chunk-V4S3RZ5S.js:8788:5)
at refreshView (C:\Users\ilumi\wishList.angular\cache\20.0.1\wishList\vite\deps_ssr\chunk-V4S3RZ5S.js:8644:7)
at detectChangesInView (C:\Users\ilumi\wishList.angular\cache\20.0.1\wishList\vite\deps_ssr\chunk-V4S3RZ5S.js:8757:5)
at detectChangesInViewWhileDirty (C:\Users\ilumi\wishList.angular\cache\20.0.1\wishList\vite\deps_ssr\chunk-V4S3RZ5S.js:8529:5)
​

This is the app.html

<div class="container">
<add-wish-form (addWish)="items.push($event)"
></add-wish-form>

<div class="row mt-3">
<wish-filter [(filter)]="filter"
></wish-filter>
</div>

<div class="row mt-3">
<wish-list [wishes]="items.filter(filter)"
></wish-list>
</div>
</div>


app.ts

import { Component, OnInit } from '@angular/core';
import { WishItem } from '../shared/models/wishItem';
import { EventService } from '@shared/services/eventService';
import { WishService } from './wish.service';

@Component({
selector: 'app-root',
templateUrl: './app.html',
standalone: false,
styleUrl: './app.scss'
})

export class App implements OnInit{
items! : WishItem[];
constructor(events: EventService, private wishService: WishService) {
events.listen('removeWish', (wish: any)=> {
console.log(wish);
let index = this.items.indexOf(wish);
this.items.splice(index, 1);
})
};
ngOnInit(): void {
this.wishService.getWishes().subscribe((data: any)=>{
this.items = data;
})
};

filter: any;
}


wish-filter.ts

import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
import { WishItem } from "@shared/models/wishItem";

const filters = [
(item : WishItem) => item,
(item : WishItem) => !item.isComplete,
(item : WishItem) => item.isComplete
];

@Component({
selector: 'wish-filter',
standalone: false,
templateUrl: './wish-filter.html',
styleUrl: './wish-filter.scss'
})
export class WishFilter implements OnInit{
ngOnInit(): void {
this.updateFilter('0');
}
@Input() filter: any;
@Output() filterChange = new EventEmitter<any>();
wishFilter : any = "0";

updateFilter(value : any){
this.filter = filters[value];
this.filterChange.emit(this.filter);
}
}

Continue reading...