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 <mat-sidenav>, an Angular Directive, is used to create a side navigation bar and main content panel with material design styling and animation capabilities. <mat-sidenav-container> - Represents the main container. <mat-sidenav-content> - Represents the content panel.
Can't bind to 'mode' since it isn't a known property of 'mat-sidenav'. If 'mat-sidenav' is an Angular component and it has 'mode' input, then verify that it is part of this module. If 'mat-sidenav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.
<mat-drawer-container> component. This is the parent component to one or two <mat-drawer> s that validates the state internally and coordinates the backdrop and content styling.
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
],
})
Angular 9 implementation
import { MatSidenavModule } from '@angular/material/sidenav';
imports: [MatSidenavModule]
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With