Steps for implementing a click event on the <select> element

Question

Exploring Angular 2 and TypeScript

Is there a way to use (click)="functionA()" within an <option> tag?

I've tried the following code but it doesn't seem to work.

 <select class="form-control">
      <option>1</option>
      <option (click)="functionA()">2</option>
      <option>3</option>
 </select>

What about trying this approach instead:

 <select class="form-control">
      <option>1</option>
      <option><a (click)="functionA()"><a>2</option>
      <option>3</option>
 </select>

Answer 1

Answer №1

No click event is necessary. Simply include (change) within the chosen element.

 <select (change)="functionA()">
      <option>1</option>
      <option>2</option>
      <option>3</option>
 </select>

ALSO: If you want two functions to be triggered as mentioned in a comment, just insert ; in between:

 <select (change)="functionA(); functionB()">
      <option>1</option>
      <option>2</option>
      <option>3</option>
 </select>

Answer 2

No click event is necessary. Simply include (change) within the chosen element.

 <select (change)="functionA()">
      <option>1</option>
      <option>2</option>
      <option>3</option>
 </select>

ALSO: If you want two functions to be triggered as mentioned in a comment, just insert ; in between:

 <select (change)="functionA(); functionB()">
      <option>1</option>
      <option>2</option>
      <option>3</option>
 </select>

Answer 3

Your constructor code is missing a " element in the statement (click)="functionA()>.

To fix this, add the missing " like so:

 <select class="form-control">
      <option>1</option>
      <option (click)="functionA()">2</option>
      <option>3</option>
 </select>

Answer 4

Your constructor code is missing a " element in the statement (click)="functionA()>.

To fix this, add the missing " like so:

 <select class="form-control">
      <option>1</option>
      <option (click)="functionA()">2</option>
      <option>3</option>
 </select>