'angular material checkbox and radio button not working properly

I am using angular material from https://material.angular.io .

I followed the steps in getting started and added all dependencies. Everything works fine except checkboxes and buttons.

When I use the syntax mentioned here https://material.angular.io/components/component/checkbox for checkboxes I am getting two checkboxes as shown below

Also I am not getting any ripple styles. Same thing with radio buttons. Can someone help me how to solve this?

Below is my code for app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import {MdButtonModule, MdCheckboxModule} from '@angular/material';
import { SampleComponent } from './sample/sample.component';
import 'hammerjs';

@NgModule({
  declarations: [
    AppComponent,
    SampleComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    BrowserAnimationsModule,MdButtonModule, MdCheckboxModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>AngularMaterialTest</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="../node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

app.component.html

<h1>
  {{title}}
</h1>
<md-checkbox>Check me!</md-checkbox>

Solution 1:^[1]

May have come 8 months late but your import 'hammerjs'; is written in the wrong folder, it should be placed in main.ts file. You can try this guide, there's a video to watch as well https://coursetro.com/posts/code/113/How-to-Build-an-Angular-5-Material-App

Solution 2:^[2]

I had an issue with my Angular material radio button not working. I found that it was a CSS issue where the inner elements within the radio button weren't filling correctly even though they operated fine.

styles.scss:

.mat-radio-inner-circle {
   height: 20px;
   width: 20px;
   background-color: navy;
 }

It is important to ensure all elements you want visible

Have a height, width, and background-color
Aren't hidden

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	GoodJeans
Solution 2	Micah

'angular material checkbox and radio button not working properly

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]