I am trying to get the onPageSizeUpdate function to read the value of option when selected but does not seem to be able to read the value as shown by the logs. Any help?

html

    <div  style="text-align: right;">
                      <span >Page Size</span>
                      <select (change)="onPageSizeUpdate($any($event.target).value)">
                        <option value="" selected="true">5</option>
                        <option value="">10</option>
                        <option value="">20</option>
                        <option value="">50</option>
                      </select>
                    </div>
    ```
    ## typescript ##
    onPageSizeUpdate(pageSize) {
        console.log(pageSize);
        console.log("working");
      }

CodePudding user response：

Instead of

onPageSizeUpdate($any($event.target).value)

1. Just do

   onPageSizeUpdate($event)

and the method:

onPageSizeUpdate(event) {
    console.log(event.target.value)
}

2. Or:

   onPageSizeUpdate($event.target.value)

and the method:

onPageSizeUpdate(event) {
    console.log(event)
} 

CodePudding user response：

You can use NgModelChange instead , but you need to add ngModel

so your code will be something like

    <div  style="text-align: right;">
                      <span >Page Size</span>
                      <select [(ngModel)]="myVar" (ngModelChange)="onPageSizeUpdate()">
                        <option value="" selected="true">5</option>
                        <option value="">10</option>
                        <option value="">20</option>
                        <option value="">50</option>
                      </select>
                    </div>

and TS

myVar ; 
onPageSizeUpdate() {
    console.log(this.myVar)
} 

this will give you more control if you want to change myVar value from the TS file