select on change angular implementation?

Question

angularjs has a built in directive called onchanges which would listen to changes in a select or whatever and allow you to execute a function upon a change.

How I wish this was so in angular. Currently I am better understanding ngmodel and seeing how I might be able to use a subject to acheive the following.

I have a select of cities:

<div id="venueFilterParams" ngModelGroup="venueFilterParams">
          <!-- need to add default values from url-->
          <select [ngModel]="citySelect"
                  name="citySelect"
                  id="citySelect"
                  class="form-control">
            <option *ngFor="let city of cities" value="{{city}}">{{city}}</option> <!--come back and wire up-->
          </select>

and a select of neighborhoods:

 <select [ngModel]="neighborhoodSelected"
                  name="neighborhood"
                  id="neighborhood"
                  class="form-control">
            <option *ngFor="let neighborhood of neighborhoodlist" value="{{neighborhood}}">{{neighborhood}}</option>
          </select>

If the user selects a city other than the one passed in the URL leading to this page, (which will be default selected I have yet to build that yet)

I need my app to reach out to my database and repopulate the neighborhood select options with the neighboorhoods for that city.

All of that I can do fine, what I am trying to figure out is code which will listen to the city select and run a function which does the above.

Now [ngModel] = citySelect; will not on its own update, I have to wait for a submit click to capture the value but what about [(ngModel)] = citySelect and listening to the citySelect variable in a subject?

I'm going to keep working on this but your suggestions are really appreciated!

Look into reactive forms, they give you an RxJS stream of all events either for a specific component or the whole form. — jonrsharpe, Jul 12 '17 at 18:53
thanks @jonrsharpe is there a way of doing this without the reactive form? if not I'll get on it. — , Jul 12 '17 at 18:55

score 1 · Answer 1 · answered Jul 12 '17 at 19:10

In Angular (v2+) you can bind directly to the javascript DOM events. For a select the event change fires whenever the value changes. Therefore you can set up and respond to the event like this:

<select [(ngModel)]="citySelect" (change)="onCityChange()">

private onCityChange(): void {
    /* Your custom code */
}

score 0 · Answer 2 · answered Jul 12 '17 at 19:07

0

You can use ngModelChange:

<select [(ngModel)]="citySelect" (ngModelChange)="myCitySpecificFunction()">

In your component:

private myCitySpecificFunction(): void {
    console.log('City updated to ' + this.citySelect);
}

Note that ngModelChange must be listed after ngModel on the html element or it won't register.

answered Jul 12 '17 at 19:07

HaveSpacesuit

3,572
6
40
59

(badass name) I thought ngModelChange was for angularjs and no longer used in angular 4?At least thats what I thought I read – Jul 12 '17 at 19:08
I use it in Angular 2. ☺ – HaveSpacesuit Jul 12 '17 at 19:13

score 0 · Accepted Answer · answered Jul 12 '17 at 19:16

Angular has similar directives called (change) or (ngModelChange).

You need two-way data binding if you want to set initial value for the city based on url. For two-way data binding, (ngModelChange) is a way to go.

Therefore, in your city select:

<select [ngModel]="citySelect"
    (ngModelChange)="onCityChange($event)"
    name="citySelect"
    id="citySelect"
    class="form-control">
  <option *ngFor="let city of cities" [value]="{{city}}">{{city}}
  </option> <!--come back and wire up-->
</select>

Then, define onCityChange in your component:

public onCityChange(chosenCity) {
  console.log(chosenCity);
  // populate neighborhoodlist based on chosenCity
}

select on change angular implementation?

3 Answers3