AngularMaterial

Angular - Material - Mat-Divider

Angular – Mat-divider

Mat-divider is used to draw a line across (and vertical) your form.

For me I wanted to separate my form, from my submit/cancel buttons so I added the following code

1
2
3
<mat-checkbox formControlName="isActive">Active</mat-checkbox>
 <mat-divider></mat-divider>
 <button …

What I found it did put my button on a new row, but the horizontal line was touching the buttons and the gheckbox. I had to also add some CSS to pad out the control a bit.

1
2
3
4
mat-divider {
     margin-top: 3px;
     margin-bottom: 3px;
}

References
https://material.angular.io/components/divider/overview