CODEWITHSUNDEEP
angulardrop-down-menu
Tracker
Tracker

Reputation: 435

How to trigger a function from dropdown in angular 2

I have a drop down with the following code,

<select class="form-control">
     <option value="">Select Draft</option>
     <option (change)="getDetails(event.name)" *ngFor="let event of eventasdraft">{{ event.name }}
     </option>
</select>

When I execute the above code,it is not triggering the function.Can anyone please help me.Thanks.

Upvotes: 1

Views: 6819

Answers (2)

Yoav Schniederman
Yoav Schniederman

Reputation: 5391

<div class="btn-group custom-drop-down" dropdown>
  <button id="single-button" type="button" class="btn" dropdownToggle>
    <span style="float: left;">{{selected}}</span>
    <span class="caret" [ngClass]="{'marginCaret': selected !== null}"></span>
  </button>
  <ul dropdownMenu role="menu" aria-labelledby="single-button" style="width: 100%;">
    <li *ngFor="let item of list" role="menuitem"><a class="dropdown-item" target="_self" (click)="toggleDropdown($event,item)">{{item}}</a></li>
  </ul>
</div>



selectOption(item : String){
    this.selected = item;
    this.selectOptionEventEmitter.emit(item);
  }

  public toggleDropdown($event: MouseEvent, item : String): void {
    $event.preventDefault();
    $event.stopPropagation();
    this.selectOption(item);
  }

Upvotes: 0

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657466

The <option> doesn't emit a change event, only the select

<select class="form-control" (change)="getEventDetails($event.target.value)">

or

<select ngModel (ngModelChange)="getDetails($event)" class="form-control">
     <option value="">Select Draft</option>
     <option *ngFor="let event of eventasdraft" [value]="event.name">{{ event.name }}
     </option>
</select>

Upvotes: 3

Related Questions