angular material checkbox and radio button not working properly

Question

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>

please provide code snippets where material is included in your app — Lucas
I added code. Also I installed @angular/material, @angular/animations node packages — aditya
I am getting that GET localhost:4200/node_modules/@angular/material/prebuilt-themes/… material.es5.js:148 Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: material.angular.io/guide/theming . But when replaced with <link rel="stylesheet" href="code.getmdl.io/1.3.0/material.indigo-pink.min.css" /> no console error. But the problem is not solved. — aditya

GoodJeans GoodJeans · Accepted Answer · 2018-02-01T07:36:34

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

angular material checkbox and radio button not working properly

1 Answers