0

I am using in my html template something like this:

 <div class="input-group" id="geo-type">
        <div class="input-label" [style.color]="geographicLocationColor">{{geoLocationTitle}}</div>
        <select class="dropdown-toggle dropdown-select" role="button" aria-haspopup="true" aria-expanded="false">
            <option value="" selected hidden>{{geographicLocationPl}}</option>
            <option *ngFor="#geo of geographicLocations" (click)="locationOnSelect(geo)">{{geo.description}}</option>
        </select>
    </div>

If I select something in dropdown menu with firefox, the method locationOnSelect is called (I am doing some other GET identified by location), but in Chrome nothing will happen - the method locationOnSelect is not called.

Also I have problem with IE (ver 11), locationOnSelect is okay, but on the next GET (user select something in second dropdown menu) the IE crashes - stop working. So my app is 100% working in firefox only. Any ideas?

Loutocký
  • 822
  • 2
  • 15
  • 28

1 Answers1

1

You need to add the (click)="..." or (change)="..." on the <select> instead of the <option>

See also Click event on select option element in chrome

<div class="input-group" id="geo-type">
    <div class="input-label" [style.color]="geographicLocationColor">{{geoLocationTitle}}</div>
    <select [ngModel]="selectedGeo" (ngModelChange)="locationOnSelect($event)"
       class="dropdown-toggle dropdown-select" role="button" aria-haspopup="true" aria-expanded="false">
        <option selected hidden>{{geographicLocationPl}}</option>
        <option *ngFor="#geo of geographicLocations" [ngValue]="geo">{{geo.description}}</option>
    </select>
</div>
Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Thank you, but I moved my (click)="locationOnSelect(geo)" to select tag and now, the app crashes because geo is undefined. – Loutocký May 04 '16 at 09:04
  • You can use `[ngModel]` with `(ngModelChange)` to get the requested behavior. – Günter Zöchbauer May 04 '16 at 09:07
  • I tried it, but I must doing something wrong, still geo is undefined. Could you send me an example of html? Thank you. – Loutocký May 04 '16 at 09:28
  • Can you try to reproduce the issue in https://plnkr.co/edit/wnLWAW?p then I'll check again. – Günter Zöchbauer May 04 '16 at 09:29
  • If it will be neccessary I will add my code to plunker, but it is very extensive (html, ts, services etc.). When I copy/paste your html example, I am getting an error: No value accessor for '' in [selectedGeo in TicketComponent@1:43] – Loutocký May 04 '16 at 10:03
  • 1
    Sorry, I added the `ngModel` stuff to the wrong tag. It should be on the ` – Günter Zöchbauer May 04 '16 at 10:04
  • Now app started and does not crash, but if I select someting, locationOnSelect still not called. I have some console.log() in this method and this log still it is not displayed... – Loutocký May 04 '16 at 10:13
  • Please create a Plunker. It shouldn't be necessary to add lot of code in addition to that in my answer. Only some sample data and the `locationOnSelect(event) {}` method that allows to verify that the code behaves as expected. I won't look through lots of your code. – Günter Zöchbauer May 04 '16 at 10:15
  • But in Chrome something happens - so locationOnSelect is called, I am testing it, but now, it does not work in Firefox (when I was writing post above, I tried it in Firefox). – Loutocký May 04 '16 at 10:16
  • You might use an outdated Angular2 version. This was fixed recently for Firefox and Edge. – Günter Zöchbauer May 04 '16 at 10:16
  • Now I am using "angular2": "2.0.0-beta.15". – Loutocký May 04 '16 at 10:23
  • I changed it into beta 17 and now it works in Chrome and Firefox, thank you very much, you are my savior! I also read, that the latest version of Angular2 is 2.0.0-rc.1, but npm does not know it, the latest npm is "2.0.0-beta.17". – Loutocký May 04 '16 at 11:06
  • 1
    The rc-versions contain the new router with lots of changes. Don't be overhasty. Docs need to be updated. Lots of issues. If you're brave you can switch of course ;-) I would wait at least a few days. They are working hard to get the issues fixed. – Günter Zöchbauer May 04 '16 at 11:08
  • I changed all my app to your html template and it works in Chrome and Firefox. IE now does not crash, but there is missing a lot of logic - I will solve it later. I have only one small question, now my placeholders are missing, do you know why? Thanks! – Loutocký May 04 '16 at 12:01
  • What do you mean by "my placeholders are missing"? – Günter Zöchbauer May 04 '16 at 12:03
  • Before making changes, my app has dropdown menu and there was a placeholder, ie "Please select location...", this placeholder is created by this . Before I have this - https://ctrlv.cz/jBYq now I have this - http://postimg.org/image/hfz0g47mp/ – Loutocký May 04 '16 at 12:08
  • 1
    You could try to create a property in you component like `this.placeholderValue = {}; this.selectedGeo = this.placeholderValue; (for example in the constructor and then change the placeholder to `` – Günter Zöchbauer May 04 '16 at 12:14
  • I did exactly what you described, but it does not work , it's empty, so I have still this http://postimg.org/image/hfz0g47mp/. – Loutocký May 04 '16 at 12:30
  • I can't open the image. You could add it to your question instead. SO allows to add images. – Günter Zöchbauer May 04 '16 at 12:32
  • I solved it by deleting this value="". Thank you again! – Loutocký May 04 '16 at 12:32
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/111010/discussion-between-loutocky-and-gunter-zochbauer). – Loutocký May 04 '16 at 13:56
  • But it works on firefox using on option tag – Luis Alfredo Serrano Díaz Sep 05 '21 at 18:48