Angular Material mat-checkbox not showing

user_11889465 0
Viewed 5181

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>
angular-material angular
2 Answers

Your code looks no issue, there should be some other issues in your project. I have created a simple checkbox sample on stackblitz with very 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>
user_39436320

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
  ],
  ...
})
user_183456680
Related