How can we call two different function for a dropdown in HTML/Angular?

Question

I coded a dropdown with two option inside: english and french. But for each option I need to call a different function. My code is in HTML :

 <select (click)="myFuncEnglish()">
    <option value="EN">English</option>
    <option value="FR">France</option>
</select>

And for Angular is:

myFuncEnglish() {
    console.log('function called is english');
  }`

Can you help me please to know how can I code different function for the different options, and to display when I click on french "function called is french", and when I click on english "function called is english".

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

I guess, you don't need to call two functions. You need to pass the selected value as the function argument and check the value in the function body to console log your message.

HTML

<select (ngModelChange)="myFuncEnglish($event)"  [(ngModel)]="lang">
    <option value="EN">English</option>
    <option value="FR">France</option>
</select>

Component

myFuncEnglish(lang) {
    if(lang === 'FR'){
      console.log('function called is french');
    } else {
      console.log('function called is english');
    }
}

See a working example here

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 07 '19 at 23:24

Kuldeep Bhimte

961
1
10
25

ngModel is not a property of select so it does not work for me. – shtb2708 Feb 07 '19 at 23:44
You can have a ngModel for you ```select``` tag – Kuldeep Bhimte Feb 07 '19 at 23:46
1

ngModel requires the forms model to be imported into your module. – Adrian Brand Feb 07 '19 at 23:49
it displays this on my computer Can't bind to 'ngModel' since it isn't a known property of 'select'. ("le {male} female {female} other {other}}}} – shtb2708 Feb 07 '19 at 23:55
https://stackoverflow.com/questions/43298011/angular-4-cant-bind-to-ngmodel-since-it-isnt-a-known-property-of-input – Kuldeep Bhimte Feb 07 '19 at 23:58

score 0 · Answer 2 · answered Feb 07 '19 at 23:23

0

Do it onchange insted, on Angular i think it is ng-change="funcEnglish()"

Then on funcEnglish validate the item.value to know you what to do.

function funcEnglish(item) {
    console.log('function called is '+ item.value);
  }

 <select onchange="funcEnglish(this)">
    <option value="Empty">None</option>
    <option value="EN">English</option>
    <option value="FR">France</option>
</select>

answered Feb 07 '19 at 23:23

Alen.Toma

4,684
2
14
31

I'm sorry but it displays nothing without errors and I don't know why, and I used ng-charge – shtb2708 Feb 07 '19 at 23:47
i really dont know Angular very much but i think that you should remove function and have only `funcEnglish` i think. – Alen.Toma Feb 07 '19 at 23:49
yes It's how I coded with your help but It still doesn't work – shtb2708 Feb 07 '19 at 23:50
Really cant help you with that. i have never worked with Angular before. but i think that there is something wrong with your component. see https://docs.angularjs.org/api/ng/directive/ngChange to know how ng-change work – Alen.Toma Feb 08 '19 at 00:06

score 0 · Answer 3 · answered Feb 08 '19 at 00:20

Another way is not using ngModel just use change event.

HTML

<select (change)="myFuncEnglish($event)">
    <option value="EN">English</option>
    <option value="FR">France</option>
</select>

Typescript

myFuncEnglish(event: any) {
    if(event.value === 'FR'){
      console.log('function called is french');
    } else {
      console.log('function called is english');
    }
}

How can we call two different function for a dropdown in HTML/Angular?

3 Answers3

HTML

Component