Angular 11, how to bind a new object in template, to component

Question

When a user loads a different selection (object) from the option drop-down list, I would like to get the NEW object returned in the (change) function. But, it is returning the default object every time, even though the select changes correctly. This type of binding was working in AngularJs when using $scope. Not sure if my Angular 11 ngModel, etc. is correct. (I have imported FormsModule)

component.ts...

 public selectedQuery: any;


// default object...
 public myQueries: [{ 
 myQueryId: number, 
 myQueryCreatedDate: Date, 
 myQueryString: string 
 }] = [{
    myQueryId: 0,
    myQueryCreatedDate: new Date(),
    myQueryString: "Please select a query"
  }]


dropDownListBuild(); // function builds correctly, loads myQueries array with options
...

this.selectedQuery = this.myQueries[0]; // gets set as default
...


onQueryChange(query: any) {
    console.log(this.selectedQuery + query); // not seeing any change happen
  }

component.html...

<div class="selectClass">
    <select [(ngModel)]="selectedQuery" (change)="onQueryChange(selectedQuery)">
            <option *ngFor="let opt of myQueries" [ngValue]="selectedQuery"> {{opt.myQueryString}}</option>
     </select>       
</div>

Pawel Woroniecki · Accepted Answer · 2021-09-26 21:01:46Z

1

Change your HTML code to the following:

<div class="selectClass">
  <select [(ngModel)]="selectedQuery" (ngModelChange)="onQueryChange($event)">
    <option *ngFor="let opt of myQueries" [ngValue]="opt">
      {{ opt.myQueryString }}
    </option>
  </select>
</div>

Changes:

Use (ngModelChange)="onQueryChange($event)" instead of (change)=onQueryChange(selectedQuery) to get new query - more details below.
Change [ngValue]="selectedQuery" to [ngValue]="opt" - previous version meant that you were repeating three times the same query as value, you just changed displayed text (so each option was presented with correct displayed text but values were always the same).

More details on change event: (change) is bound to change event fired even without Angular, it's just classic input change event. You can use it without ngModel but using with ngModel doesn't work particularly well as this event is (or at least may be) fired before ngModel is updated.

That's why you should use dedicated (ngModelChange) which is an output of ngModel directive so it is fired always after model from ngModel is changed.

Btw. If you don't need to detect the moment when query is changed but instead you just need to have correct query stored in selectedQuery attribute - just apply second fix and you can remove ngModelChange.

edited Sep 26, 2021 at 21:01

answered Sep 25, 2021 at 23:54

Pawel Woroniecki

5192 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

TMR Over a year ago

Thanks for your input, that is returning... "3: Object" not sure how to access the object properties?

Pawel Woroniecki Over a year ago

query.target.value is your query object so you can access properties simply by their names. Updated my example to show how you can access the properties and how to print whole object using JSON.stringify as an example.

TMR Over a year ago

I agree this should work, but all of those are undefined. I can get the properties I need from the ngModel "selectedQuery", but it is not updating w/the onQueryChange, it stays on the default [0] value.

Pawel Woroniecki Over a year ago

I'm really sorry but I was totally wrong yesterday. Updated my answer so now it should be fully correct. Please check current version and it should solve your issues.

TMR Over a year ago

You rock! That fixed it, I can't thank you enough.

|

Collectives™ on Stack Overflow

Angular 11, how to bind a new object in template, to component

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related