Angular 12. error TS2339: Property 'value' does not exist on type 'EventTarget'

Question

I am following the pro angular 6 3rd edition book tutorial and I am finding it hard to resolve the issue with value of a $event.target. it is suppose to be an option to limit the number of articles per page on display. but I cannot get it to work, my main issue now I think is that the feature is no longer available in angular 12.

ts code is as follows:

...

changePage(newPage: number){
    this.selectedPage = newPage;
}

changePageSize(newSize: number){
    this.productsPerPage = Number(newSize);
    this.changePage(1);
}

get pageNumbers(): number[]{
    return Array(Math.ceil(this.repository.getProducts(this.selectedCategory)
      .length / this.productsPerPage)).fill(0).map((x, i)=> i +1);
 } 

...

enter code here

html template part with the issue ...

 <select class="form-control" [value]="productsPerPage"
    (change)="changePageSize($event.target.value)">
        <option value="3">3 per Page</option>
        <option value="4">4 per Page</option>
        <option value="6">6 per Page</option>
        <option value="8">8 per Page</option>
    </select>

... I appreciate any solutions that may help.

Answer 1

Why you don't just put:

HTML:

 <select class="form-control" [(ngModel)]="productsPerPage">
        <option value="3">3 per Page</option>
        <option value="4">4 per Page</option>
        <option value="6">6 per Page</option>
        <option value="8">8 per Page</option>
    </select>

NOTE: You have to import NgModule in your module.

For instance, in your app.module.ts:

...
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
...


imports: [
...
    FormsModule,
...
]