I'm new to Angular/material2 and I'm unsure of what I'm missing from trying to follow the documentation on sidenav
.
In my AppComponent, I would like to display a sidenav and I've implemented as follows:
app.component.tss
import {
NgModule,
Component
} from '@angular/core';
import {
MatSidenavModule,
MatSidenavContent,
MatSidenav
} from '@angular/material';
import {
BrowserAnimationsModule
} from '@angular/platform-browser/animations';
@NgModule({
imports: [
BrowserAnimationsModule,
MatSidenav
],
exports: [
BrowserAnimationsModule,
MatSidenav
]
})
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}
app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<mat-sidenav-container>
</mat-sidenav-container>
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<nav>
<a routerLink="/clients">Clients</a>
</nav>
<router-outlet>
</router-outlet>
</div>]
The error is:
Uncaught Error: Template parse errors:
'mat-sidenav-container' is not a known element:
1. If 'mat-sidenav-container' is an Angular component, then verify that it is part of this module.
2. If 'mat-sidenav-container' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message
What am I missing in my code?
The answer from Sajeetharan was not working with newer versions of angular material.
From here :
MaterialModule was deprecated in version 2.0.0-beta.3 and it was removed completely in version 2.0.0-beta.11...
So, to fix the issue :
On post 2.0.0-beta.3 :
import {
MatSidenavModule,
} from '@angular/material';
@NgModule({
exports: [MatSidenavModule],
imports: [
MatSidenavModule
],
})
And in older versions :
@NgModule({
imports: [
MaterialModule
],
})
You need to import import { MaterialModule } from './material.module';
in app.module.ts
imports: [
MaterialModule
]
Since material module
has been depreciated, With Angular latest version you need to use
import { MatSidenavModule } from '@angular/material/sidenav';
Angular 9 implementation
import { MatSidenavModule } from '@angular/material/sidenav';
imports: [MatSidenavModule]
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.