Currently using Jw pagination with a page size that changes on 5, 10, or 15 using a dropdown. The Angular version being used is angular 9.
The HTML code snippet for this functionality looks like:
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
<span class="mr-2">Page Size:</span>
</div>
<div class="col-md-9">
<select (change)="updatePageSize($event.target.value)"
class="control-form-sm" style="width:20%;">
<option selected>5</option>
<option >10</option>
<option>15</option>
<option>20</option>
</select>
</div>
</div>
</div>
https://i.sstatic.net/cQlvM.png
Upon changing the dropdown to 10 or 15, the following function in the component.ts file gets called:
updatePageSize(pageNumber:number){
console.log(pageNumber);
this.pageSize=pageNumber;
this.listBooks();
}
https://i.sstatic.net/XBJwQ.png
Even though the value is logged successfully in the console, an error "
Cannot read property 'currentValue' of undefinedThe complete content of my component.ts file can be seen below:
import { Component, OnInit } from '@angular/core';
import { Book } from 'src/app/common/book';
import { ActivatedRoute } from '@angular/router';
import { BookService } from 'src/app/service/book.service';
@Component({
selector: 'app-book-list',
/* templateUrl: './book-list.component.html', */
templateUrl: './book-grid.component.html',
styleUrls: ['./book-list.component.css']
})
export class BookListComponent implements OnInit {
books :Book[];
currentCategoryId:number;
searchMode:boolean;
//for pagination
pageOfItems:Array<Book>;
pageSize:number=6;
constructor(private bookService:BookService,private _activatedRoute:ActivatedRoute) {
}
ngOnInit(): void {
// this.listBooks();
this._activatedRoute.paramMap.subscribe(() => {
this.listBooks();
})
}
//pagination
pageClick(pageOfItems:Array<Book>){
// console.log(pageOfItems);
//update the current page of items
this.pageOfItems=pageOfItems;
}
//updating page size
updatePageSize(pageNumber:number){
console.log(pageNumber);
this.pageSize=pageNumber;
this.listBooks();
}
listBooks(){
this.searchMode =this._activatedRoute.snapshot.paramMap.has('keyword');
if(this.searchMode){
//do search books
this.handleSearchBooks();
}
else{
//display books based on category
this.handleListBooks();
}
}
handleListBooks(){
const hasCategoryId:boolean= this._activatedRoute.snapshot.paramMap.has('id');
if(hasCategoryId){
this.currentCategoryId= +this._activatedRoute.snapshot.paramMap.get('id');
}
else{
this.currentCategoryId=1;
}
this.bookService.getBooks(this.currentCategoryId).subscribe(
data => {
// console.log(data);
this.books=data;
// this.items=this.books;
}
)
}
handleSearchBooks(){
const keyword:string= this._activatedRoute.snapshot.paramMap.get('keyword');
this.bookService.searchBooks(keyword).subscribe(
data =>{
//console.log(data);
this.books=data;
// this.items=this.books;
})
}
}