How To align mat-dialog-actions buttons to the right,center or left

mat-dialog-actions align

To align mat dialog actions buttons to the right center or left we can make use of align attribute.

Have a look at the below mat dialog example

<h1 mat-dialog-title>Hello</h1>
<div mat-dialog-content>
  Sample content
</div>
<div mat-dialog-actions>
  <button mat-button mat-dialog-close>No</button>
  <button mat-button mat-dialog-close cdkFocusInitial>Ok</button>
</div>

By default mat dialog actions buttons aligned to the left corner of the mat dialog popup.

mat dialog actions buttons align right

To right align the mat dialog actions buttons, use align="end" attribute on mat-dialog-actions container.

<h1 mat-dialog-title>mat-dialog-actions button right align</h1>
<div mat-dialog-content>
  Sample content
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>No</button>
  <button mat-button mat-dialog-close cdkFocusInitial>Ok</button>
</div>

mat dialog actions buttons align center

Similarly to display the mat dialog actions buttons in the middle of the container, use align="center" attribute.

<h1 mat-dialog-title>mat-dialog-actions button center align</h1>
<div mat-dialog-content>
  Sample content
</div>
<div mat-dialog-actions align="center">
  <button mat-button mat-dialog-close>No</button>
  <button mat-button mat-dialog-close cdkFocusInitial>Ok</button>
</div>

Mat dialog actions align Stackblitz demo

Have a look at the below demo

Mat dialog actions align Stackblitz demo

Liked this post? Subscribe
Avatar
Arunkumar Gudelli

I am One among a million Software engineers of India. I write beautiful markup.I make the Web useful.

Previous