Md-divider (mat-divider) not displaying in angular material2

Question

I am using <md-divider> , for example <hr> . I thought this was ok using <hr> . However, <md-divider> sometimes not displayed.

I used <md-divider> in <md-card> , but <md-divider> not displayed. Should I use <md-divider> in <md-list> ?

If anyone has the same problem with me, please share your experience to solve this problem.

Here is my code.

 <div class="card-height" fxLayoutAlign="center center"> <md-card fxFlex="30" fxLayout="column"> <md-card-title>Sign in</md-card-title> <form [formGroup]="myForm" (ngSubmit)="onSignin()"> <md-card-content> <div class="form-group"> <md-input-container> <input mdInput placeholder="E-mail" formControlName="email"> <md-hint> <span class="invalid" [hidden]="myForm.controls['email'].pristine || !myForm.controls['email'].errors?.required">Required</span> <span class="invalid" [hidden]="myForm.controls['email'].errors?.required || !myForm.controls['email'].errors?.email">This doesn't appear to be a valid email address.</span> <span class="invalid" [hidden]="!myForm.controls['email'].errors?.pattern">Email address is not correct.</span> </md-hint> </md-input-container> </div> <div class="form-group"> <md-input-container> <input mdInput placeholder="Password" formControlName="password" type="password" fxLayoutAlign="center"> <md-hint> <span class="invalid" [hidden]="myForm.controls['password'].pristine || !myForm.controls['password'].errors?.required">Required</span> </md-hint> </md-input-container> </div> </md-card-content> <md-card-actions> <a [routerLink]="['/forget-password']">Do you forget your password?</a> <button md-button color="accent" type="submit">Login</button> </md-card-actions> </form> </md-card> </div> 

Answer 1

February 18th update

MatDivider has been ported to its own module :

 import {MatDividerModule} from '@angular/material'; 

---

Outdated answer

<md-divider> is part of the MdListModule . If you want to use it, you need to import the MdListModule into your component module and have at least <md-list></md-list> somewhere in your template. If you are not using lists, importing the entire module for the divider is probably unnecessary. Just use <hr> with your own styles, such as:

 hr { display: block; margin: 10px 0 10px 0; border-top: 1px solid rgba(0, 0, 0, .12); width: 100% } 

see Material List Directives

Answer 2

UPDATED : try mat-divider instead of md-divider

Try this CSS style.

 md-divider { border-width: 1px; border-style: solid; } 

Answer 3

 import { MdListModule } from '@angular/material'; imports: [ MdListModule ], <md-list><md-divider></md-divider></md-list>