Currently I'm working on an Angular project.
I want to create a select button that calls a function in my .ts file when I click on one of the options. It has to send the chosen option with it.
Right now I'm using the following code:
In my HTML
<select class="btn add" (change)="onChange($event.target.value)">
<option value="" disabled selected>Choose...</option>
<option *ngFor="let option of listOfOptions >{{option}}</option>
</select>
In my .TS
private listOfOptions = ['delete'];
And the function that has to be triggered.
onChange(option) {
if(option = 'delete') {
console.log('Triggered delete!');
}
}
As you can see currently I'm using the (change) event. But when it's on 'Delete' and you would click 'delete' again thats not working. So therefor I want to change it to something like (click). But when I do that it triggers on opening the selector instead of when chosing an option.
How do I make it so it always triggers when I'm choosing an option inside the selector, but not the selector itself?