48

Getting error "mat-nav-list is not a known element" , used @angular/material" version "^5.2.5"

Pavindu
  • 2,684
  • 6
  • 44
  • 77
Godwin Raj
  • 501
  • 1
  • 4
  • 5
  • 1
    Welcome to Stack Overflow. Please read up on how to provide a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) You may also benefit from [How to ask](https://stackoverflow.com/help/how-to-ask) and [What is expected of SO users](https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) – mtr.web Apr 19 '18 at 17:38

5 Answers5

87

None of above worked for me. I had to include 'MatListModule' and it worked.

Arnold.Krumins
  • 1,055
  • 8
  • 8
  • what is the import for that? – BlackICE Aug 11 '18 at 19:12
  • 18
    `import {MatListModule} from '@angular/material/list';` See https://material.angular.io/components/list/api – Wiil Sep 09 '18 at 21:05
  • According to the documentation also it's `MatListModule` but for some reason it's still not working for me. I have imported and exported it from a custom module just for Material modules. – TheSHETTY-Paradise Nov 01 '20 at 16:53
6

  1. Make sure that the component is loading well in the browser, without any imports yet.

  2. Now follow the implementation as per Docs presented on https://material.angular.io/components/sidenav/overview

If you're confused by the documentation, here's what you should do -

Head to the module of the component and add the following

import { MatSidenavModule } from '@angular/material/sidenav';

and

imports: [
   // Other imports
   MatSidenavModule
],

Then you can write the HTML code. The Nav should work well.

That's it!

Please let me know if the error persists

Mohammad Faisal
  • 5,783
  • 15
  • 70
  • 117
Meet Dave
  • 990
  • 10
  • 11
6

Make sure you have imported MatListModule and declared it in your imports in the App.Component module. It works for me

Paul Davies
  • 97
  • 2
  • 9
6

In order to overcome the error

<mat-nav-list>

tag is not known as an element, we need to import MatListModule along with MatSidenavModule as

import {MatSidenavModule} from '@angular/material/sidenav';
import {MatListModule} from '@angular/material/list';
S J BHAVANA
  • 1,421
  • 11
  • 8
1

It may still help someone I forgot to declare the Component where I use the 'mat-nav-list' in the app-module

lins princy
  • 29
  • 4