2

I am trying to use an Angular Material (7.0) selection list as described here.

The example code snippet on the page is 

  <mat-selection-list #shoes>
    <mat-list-option *ngFor="let shoe of typesOfShoes">
      {{shoe}}
    </mat-list-option>
  </mat-selection-list>

  <p>
    Options selected: {{shoes.selectedOptions.selected.length}}
  </p>

with the typesOfShoes defined in the TS file, as described in their snippet:

export class HomeComponent implements OnInit {
  typesOfShoes: string[] = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];
  constructor() {}
  ngOnInit() {}
}

Makes sense to me, but when I try to compile I get the Error:

ERROR in: Can't bind to 'ngForOf' since it isn't a known property of 'mat-list-option'.
1. If 'mat-list-option' is an Angular component and it has 'ngForOf' input,
 then verify that it is part of this module.
2. If 'mat-list-option' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA'
 to the '@NgModule.schemas' of this component to suppress this message.
etc.

I have imported MatListModule into my app module.

I see no further modules related to list options to import.

What am I missing here?

Ashish Ratan
  • 2,838
  • 1
  • 24
  • 50
Steve
  • 14,401
  • 35
  • 125
  • 230
  • Possible duplicate of [Can't bind to 'ngForOf' since it isn't a known property of 'tr' (final release)](https://stackoverflow.com/questions/40331549/cant-bind-to-ngforof-since-it-isnt-a-known-property-of-tr-final-release) – Abhishek Kumar Dec 26 '18 at 04:54

1 Answers1

0

Import BrowserModule (or CommonModule if it's a child module) in @NgModule():

import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  imports: [BrowserModule],
})
Maarti
  • 3,600
  • 4
  • 17
  • 34
  • My app module already has `import { BrowserModule } from '@angular/platform-browser'`. My sharedModule imports `CommonModule` and my `MaterialModule` (with all the material module imports/exports). All my other material components work. – Steve Dec 19 '18 at 19:41
  • 2
    actually, my shared module imported common module but did not export it. That fixed it. – Steve Dec 19 '18 at 19:44
  • as of today this doesnt work `Module '"../../node_modules/@angular/common/common"' has no exported member 'BrowserModule'.ts(2305)` – Marny Lopez Oct 30 '20 at 11:03