how to get the selected value from HTML into ts file?

Question

I am trying to get the selected value from HTML into ts file . Below is the HTML code which uses Angular material tags

      <mat-form-field [style.visibility]="visibility" >
              <mat-label>Apps</mat-label>
              <mat-select #selectedApp (change)='fetchTableData($event)'>
                    <mat-option *ngFor="let apps of appsList$" [value]="apps.appName">{{apps.appName}}</mat-option>
                    <mat-option [value]="all">All</mat-option>
              </mat-select>
        </mat-form-field>

.ts code

     @ViewChild('selectedApp') selectedApp;

     ngOnInit() {             
             return this.testcaseService.getAll()
         .subscribe(apps => this.appsList$ = apps);

      }

     fetchTableData(event: any){                  

        console.log("Selected App: "+this.selectedApp.Selected);
      }

I am not sure what am i doing wrong here . Can anyone help me

Hien Nguyen · Answer 1 · 2019-05-01T15:59:01.020

1

Change your (change) event to fetchTableData($event.value)

 <mat-form-field [style.visibility]="visibility" >
              <mat-label>Apps</mat-label>
              <mat-select #selectedApp (change)='fetchTableData($event.value)'>
                    <mat-option *ngFor="let apps of appsList$" [value]="apps.appName">{{apps.appName}}</mat-option>
                    <mat-option [value]="all">All</mat-option>
              </mat-select>
 </mat-form-field>

and use event as selected value

fetchTableData(event: any) {

    console.log("Selected App: " + event);
  }

Demo https://stackblitz.com/edit/angular-mat-select-data-2

You should not use this.selectedApp.Selected

edited May 01 '19 at 15:59

answered May 01 '19 at 01:23

Hien Nguyen

24,551
7
52
62

I have tried the above solution . its not working , Could there be any other issue ? – user1553680 May 01 '19 at 15:55
thanks . i checked your code and it looks perfectly fine . but somehow its not working in my local . when i change the option from dropdown , the control does not go into fetchTableData(event) in ts . I don't get any errors in console or anything that i can debug . weird . – user1553680 May 01 '19 at 20:23

score 0 · Accepted Answer · answered May 01 '19 at 00:06

0

I think you need to use selectionChange event binding from mat-select.

https://material.angular.io/components/select/api

answered May 01 '19 at 00:06

Prasanth

507
2
10

thanks . I have followed your suggestion and this solution - https://stackoverflow.com/questions/50614991/angular-mat-select-multiple-selectionchange-finding-which-option-was-changed , but this is also not working for me . I am wondering what i have done wrong here ? – user1553680 May 01 '19 at 15:57
what version of angular material are you using ? – Prasanth May 01 '19 at 16:09
"@angular/cli": "~7.3.8" – user1553680 May 01 '19 at 18:54
Thanks Prasanth , i have modified (change) to (selectionChange) , it worked perfectly fine now . Google changed the syntax from angular 6 , it seems . – user1553680 May 02 '19 at 19:56

how to get the selected value from HTML into ts file?

2 Answers2