0

I'm new to angular. I'm working with material bottom sheet in material angular. In main component.ts file I'm describing second html file with help of component decorator but when compiling the project compiler says that <mat-nav-list> is not known element. What is reason?

app.component.html

<div>
  <button mat-stroked-button (click)="openBottomSheet()">Show Bottom Sheet</button>
</div>

app.component.ts

import { MatBottomSheet, MatBottomSheetRef } from '@angular/material/bottom-sheet';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

constructor(private snackBar: MatSnackBar, private bSheet: MatBottomSheet){}

openBottomSheet(): void {
    this.bSheet.open(BottomSheetExampleSheet);
  }
}
@Component({
  selector: 'bottom-sheet-example-sheet',
  templateUrl: 'bottom-sheet-example-sheet.html',
})
export class BottomSheetExampleSheet {
  constructor(private _bottomSheetRef: MatBottomSheetRef<BottomSheetExampleSheet>) {}

  openLink(event: MouseEvent): void {
    this._bottomSheetRef.dismiss();
    event.preventDefault();
  }
}

Second template, bottom-sheet-example-sheet.html

<h1>Here we are showing Bottom Sheet</h1>
<div>
    <input>
</div>

<mat-nav-list>
    <a href="https://keep.google.com/" mat-list-item (click)="openLink($event)">
        <span mat-line>Google Keep</span>
        <span mat-line>Add to a note</span>
      </a>
</mat-nav-list>

Error on Node.js command prompt

ERROR in node_modules/@angular/material/list/list.d.ts:21:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/material/list) which declares MatNavList has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

21 export declare class MatNavList extends _MatListMixinBase implements CanDisable, CanDisableRipple, OnChanges, OnDestroy {

Community
  • 1
  • 1
Jawad
  • 1

1 Answers1

0

you should import list-module to your app.module.ts file and add it to imports:

import {MatListModule} from '@angular/material/list';

@NgModule({
  declarations: [AppComponent],
  imports: [MatListModule], //add it here
  //rest of your code
behruz
  • 570
  • 4
  • 13
  • Yes I did it but when I use MatNavList then error described above is shown on ngcc screen. – Jawad Jun 18 '20 at 05:48