How to bind ASP.NET Core null to Angular2 null?

Question

So I have web app that is made of .net core and angular2. Thing is that from my DB I send currency parameter to angular2. For now my currency is NULL, so angular2 gets state.user.currency = null. My dropdown looks like that:

<p>Currency</p>
<select class="custom-select col-md-6" [(ngModel)]="state.user.currency">
    <option class="col-md-6" *ngFor="let currency of CURRENCIES" value="{{currency.id}}">{{currency.name}}</option>
</select>

CURRENCIES looks like that:

public CURRENCIES: any = [
    { id: <any>null, name: "Original currencies" },
    { id: "EUR", name: "Euro" },
    { id: "USD", name: "US Dollar" },
    { id: "AUD", name: "Australian Dollar" }
]

I want that when angular2 gets currency as null my dropdown would should selected option as "Original currencies", but now I get just empty box like this:

How to correctly bind null values??

This may help: [Binding select element to object in Angular 2](https://stackoverflow.com/q/35945001/215552). — Heretic Monkey, Jul 27 '17 at 14:49

score 1 · Accepted Answer · answered Jul 27 '17 at 14:49

You should bind using the proper binding expression using the "box" notation: [value]="currency.id"

Code:

<select class="custom-select col-md-6" [(ngModel)]="state.user.currency">
    <option class="col-md-6" *ngFor="let currency of CURRENCIES" [value]="currency.id">{{currency.name}}</option>
</select>

How to bind ASP.NET Core null to Angular2 null?

1 Answers1