Angular - Can't bind to 'ngValue' since it isn't a known property of 'mat-option'

Question

I\'m using angular 5 and I\'m getting the console error:

Can\'t bind to \'ngValue\' since it isn\'t a known property of \'mat-option\'

Answer 1

for mat-autocomplete, to use items instead of strings, for mat-option, ngValue wasn't available, however with [value], we can access the object by using option.value instead of option.viewValue:

allFruits: Item[] = [
    {
      name: 'hello',
      selected: true,
    },
    {
      name: 'world',
      selected: false,
    }
  ];



    
      {{fruit.name}} {{fruit.selected}}
    
  


selected(event: MatAutocompleteSelectedEvent): void {
    console.log('selected ', event.option.value); <----- THIS
    console.log('selected ', event.option.viewValue); <---- NOT THIS
}

with option.value you get the object. With option.viewValue you will get a string representation of the innerHTML that the user sees.