How do you get the value of the selected option in angular 5

See more:

.NET

Angular5

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}}