pass ejs-dropdownlist value from html to component on button click "without" ngmodel

[Unknown]

Can I know a way to pass ejs-dropdownlist value from html to component on button click "without" ngmodel.

<div class="col-md-12">

                                <div class="row mb-3">

                                    <div class="col-12 d-flex duplicate-label-control">

                                        <label class="" for="specName">Specification Name</label>

                                        <input id="specName" name="specName" type="text" #specName

                                            class="form-control duplicate-input-control" maxlength="100" />

                                        

                                    </div>

                                </div>

                                <div class="row mb-3">

                                    <div class="col-12 d-flex duplicate-label-control">

                                      <label class="">Bill To</label>

                                      <ejs-dropdownlist required id="drpBillTo" name="drpBillTo" class="boxed-dropdown form-control"

                                        [dataSource]="districts" [fields]='billToFields' [placeholder]='billToSelectionText'

                                        (change)='onDistrictChange($event)'

                                        [allowFiltering]='true' (filtering)='onFilteringBillTo($event)'>

                                      </ejs-dropdownlist>

                                    </div>

                                    <div *ngIf="showBillToValidation" class="e-error">

                                        Bill To is required

                                    </div>

                                </div>

                                <div class="row mb-3">

                                    <div class="col-12 d-flex duplicate-label-control">

                                      <label class="">Ship To</label>

                                      <ejs-dropdownlist required id="drpShipTo" name="ShipTo" class="boxed-dropdown form-control"

                                        [dataSource]="schools" [fields]='shipToFields' [placeholder]='shipToSelectionText'

                                        [allowFiltering]='true' (filtering)='onFilteringShipTo($event)'>

                                      </ejs-dropdownlist>

                                    </div>

                                    <div *ngIf="showShipToValidation" class="e-error">

                                        Ship To is required

                                    </div>

                                </div>

                                <div class="row">

                                    <div class="col-6 p-0">

                                        <p class="e-error inline-header row" *ngIf="showNameValidation">Specification Name

                                            is required.</p>

                                        <p class="e-error" *ngIf="showDuplicateName">Specification Name already exists.</p></div>

                                        <div class="col-6 p-0">

                                        <button ejs-button type="button" id="btnSaveDuplicate"

                                            class="e-control e-btn e-lib e-primary my-3 float-right"

                                            (click)="onClickDuplicateSpecificationsAsync(specName.value,drpBillTo)" #btnSaveDuplicate>Save Duplicate

                                        </button>

                                    </div>

                                </div>

                            </div>

[Sevvandhi Nagulan]

Hi Leela, 

Greetings from Syncfusion support. 

We checked your query. By passing an instance of the DropDownList component directly to the method, we can get the selected value. Please refer to the code below. 

[app.component.html] 

  <ejs-dropdownlist 

          #ddl 

          id="games" 

          [dataSource]="sportsData" 

          [fields]="localFields" 

          [placeholder]="localWaterMark" 

          [popupHeight]="height" 

        ></ejs-dropdownlist> 

        <input type="button" value="GetValue" (click)="OnClick(ddl.value)" /> 

[app.component.ts] 

    OnClick(dropValue) { 

      console.log(dropValue); 

    } 

Please find the sample below. 

Sample link: https://stackblitz.com/edit/angular-hbzewc-y9zion?file=app.component.ts 

Please get back to us if you need further assistance. 

Regards, 

Sevvandhi N 

[Unknown]

Thank you so much Sevvandhi Nagulan,This worked for me 

[Sevvandhi Nagulan]

Hi Leela, 

Thanks for the update. Please get back to us if you need further assistance. 

Regards, 

Sevvandhi N