Angular Material mat-checkbox not showing

Question

I am currently trying to implement Angular Material Checkboxes in my side but it won't work for me for some reason. The box isn't showing up. Can someone look over my code and imports?

These are my current imports:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule} from '@angular/material/button';
import { MatMenuModule } from '@angular/material/menu';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule,
    MatCheckboxModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

This is the code I try to create the box with:

<section class="example-section">
    <mat-checkbox class="example-margin">Check me!</mat-checkbox>
  </section>
    

Answer 1

Your code looks no issue, there should be some other issues in your project. I have created a simple checkbox sample on stackblitz with less imports: https://stackblitz.com/edit/angular-umypmc

TS:

import './polyfills';

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {CheckboxOverviewExample} from './app/checkbox-overview-example';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatCheckboxModule
  ],
  declarations: [CheckboxOverviewExample],
  bootstrap: [CheckboxOverviewExample]
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));
  

HTML:

<section class="example-section">
  <mat-checkbox class="example-margin">Check me!</mat-checkbox>
</section>

Answer 2

You must add

import {MatCheckboxModule} from '@angular/material/checkbox';

into your app.module.ts, and imports that module in @NgModule as follows:

import {MatCheckboxModule} from '@angular/material/checkbox';


@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatCheckboxModule
  ],
  ...
})