CODEWITHSUNDEEP
angularangular-material
Aish Anu
Aish Anu

Reputation: 1612

mat-sidenav-content is throwing No provider for MatSidenavContainer

app.component.html

<mat-side-nav-container>

    <mat-sidenav #sidenav>
        <mat-nav-list>
            <a mat-list-item [routerLink]="'/accounts'"> Accounts </a>
            <a mat-list-item [routerLink]="'/create-account'"> Create Account </a>
            <a mat-list-item [routerLink]="'/contacts'"> Contacts </a>
            <a mat-list-item [routerLink]="'/create-contact'"> Create Contact </a>
            <a mat-list-item [routerLink]="'/activities'"> Activities </a>
            <a mat-list-item [routerLink]="'/create-activity'"> Create Activity </a>
            <a mat-list-item (click)="sidenav.toggle()" href="" mat-list-item>Close</a>
        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content></mat-sidenav-content>
</mat-side-nav-container>

app.moule.ts

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,    
    MatToolbarModule,
    MatSidenavModule,
    MatListModule,
    MatButtonModule,
    MatIconModule,
    HttpClientModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

MatSidenavModulemodule is imported but still getting the below error

NullInjectorError: StaticInjectorError(AppModule)[MatSidenavContent -> MatSidenavContainer]: StaticInjectorError(Platform: core)[MatSidenavContent -> MatSidenavContainer]: NullInjectorError: No provider for MatSidenavContainer!

Upvotes: 4

Views: 6506

Answers (1)

user3804427
user3804427

Reputation: 442

You made mistake in tag:

mat-sidenav-container

You have:

mat-side-nav-container

Replace mat-side-nav-container to mat-sidenav-container.

Upvotes: 4

Related Questions