angular - how to display selected dropdown menu array in console?

Question

I have a drop down list with the product names and i want to display the selected drop down value and index in the console. Once a value is selected I want to pass the dropdown value and index as a parameter to the function getSome. But when I do this i get the index as undefined and i get the entire array. How do I display only the selected value's array only.

export class Service {

  constructor(protected httpClient: HttpClient) {

  }

  public getTemplateData(start:number,limit:number):Observable<any>{
    return this.httpClient.post('/p-services/atomic-services/TemplateData',{
      startIndex:start,
      pageLimit:limit
    });
  }
      

export class ConfigManagerComponent {

  productData:any;
  totalRecords: number = 0;
  pageSize: number = 5;
  startIndex: number = 0;
  pageIndex: number;
DROPDOWN_LIST: templateData[]; 
  
  constructor(private Service: Service, private _formBuilder: FormBuilder,  private dialog: MatDialog) { }

  ngOnInit() {

  CodeNextBtn() {
          this.Service.getTemplateData(0,this.pageSize).subscribe(
            (templateResponse) =>{
              this.productData=         //binding database values to productData
  templateResponse.productData;
              this.totalRecords=templateResponse.totalRecords;
              this.referenceShowProgressBar
              this.DROPDOWN_LIST = templateResponse.productData;
  

            },
             (error) => {
              console.error(error);
              this.referenceShowProgressBar = false;
            }
            
          );

        } 
      
  getSome(DROPDOWN_LIST: any, index:number){
 

    
      console.log(DROPDOWN_LIST); // i want to display the selected value and index
      console.log(index);
}

export class templateData{
  name?: string;
  sub_type?:string;
access_type?:string;
 
}

<mat-card style="margin-top: 10px;" *ngIf="showDetails">
  <div>
    <h1 class="header-result"> Data</h1>
  </div>

  <form [formGroup]="templateDataFormGroup" fxLayout fxLayout.xs="column" fxLayoutGap="10px">



  <mat-form-field appearance="fill">
      <mat-label>Product Name</mat-label>
      <select matNativeControl (change)="getSome(DROPDOWN_LIST,i)"> 
        <option *ngFor="let DROPDOWN_LIST of DROPDOWN_LIST; index as i" 
          [selected]="DROPDOWN_LIST.product_name">
          {{DROPDOWN_LIST.product_name}}
        </option>
      </select>
    </mat-form-field>

question from:https://stackoverflow.com/questions/65877556/how-to-display-selected-dropdown-menu-array-in-console

Answer 1

Waitting for answers