CODEWITHSUNDEEP
angularangular-material
Kyh
Kyh

Reputation: 73

Angular Material mat-checkbox not showing

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>

Upvotes: 3

Views: 10620

Answers (2)

huan feng
huan feng

Reputation: 8623

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>

Upvotes: 3

JW Zhu
JW Zhu

Reputation: 31

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

Upvotes: 1

Related Questions