VS2017 using the .Net Core 2 with Angular 5 template.
How do you get the value for the selected drop-down option.
Typescript file looks like this:
import { Component } from '@angular/core';
@Component({
selector: 'app-sku-registration-component',
templateUrl: './sku-registration.component.html'
})
export class SkuRegistrationComponent {
catalogs = [
{ catalogname: "Macy's", catalogcode: "100" },
{ catalogname: "Sears", catalogcode: "200" },
{ catalogname: "JCPenny", catalogcode: "300" },
{ catalogname: "LL Bean", catalogcode: "B5000" }
];
}
and the html file like this:
<div class="container">
<form #skuRegistrationForm="ngForm">
<div class="form-group">
<label for="power">Catalog</label>
<select class="form-control" id="catalog"
required
[(ngModel)]="catalogs" name="catalogselector">
<option *ngFor="let cat of catalogs" [ngValue]="cat">{{cat.catalogname + "(" + cat.catalogcode + ")"}}</option>
</select>
</div>
<div>Selected catalog code: {{cat.catalogcode}}</div>
<button (click)="incrementsku-registration()">SUBMIT</button>
</form>
</div>
I can't get the following line to display the selected catalog code:
<div>Selected catalog code: {{cat.catalogcode}}</div>
I need to get the catalog code so I can use it to filter a dependent drop-down.
What I have tried:
I've tried changing [ngValue] to [value]
and I've tried several variations of the following:
{{cat.catalogcode}}
{{catalogs}}
{{catalogs?.catalogcode}}
{{catalogcode}}