-1

I have code like this

<mat-form-field>
  <mat-select  id="selectNow" placeholder="{{data?.chatMessage?.labelText}}" (selectionChange)="dropDownActionEvent($event,selected,'selection_change'); display($event)" [(value)]="selected">
    <mat-option>None</mat-option>
    <mat-option (click)="onSelect(i)" *ngFor="let x of merged;" [value]="x.data">
      {{x.labels}}
    </mat-option>
  </mat-select>
</mat-form-field>

I want selected index of selected value i am doing like below but not able to get selected index

var index = document.getElementById("selectNow").selectedIndex;
document.write(index);
samir
  • 25
  • 5
  • You shouldn't be using `document` methods in Angular. You can use template-driven or reactive forms to always have access to the currently selected element. I suggest you look at the Forms section of Angular's documentation. – Will Alexander May 19 '22 at 12:51
  • not able to get selected index – samir May 19 '22 at 14:22
  • You absolutely can. Angular offers many many approaches, including that suggested by @MuhammadUmar below. We're not going to code it for you, you need to put in the work yourself here. – Will Alexander May 19 '22 at 14:49

1 Answers1

0

Don't use vanillaJS ways to manipulate/get dom. Angular offers some handy ways to access/manipulate dom. you are using the right attriube to get the event, but you are placing it in the wrong tag. Place (selectionChange) inside mat-option tag. For a working example refer to this answer's Stackblitz. This example showcases onSelectionChange which also fulfills the result you are looking for

Muhammad Umar
  • 1,291
  • 7
  • 13