fix(material-experimental/mdc-dialog): make align attr into an input of dialog actions directive

Fixes multiple issues, such as self-documentation of the align attribute, type checking, better
bindings, and IDE support. Because align is not standard for HTMLDivElement, it doesn't make much
sense to assume end users to know they can use the align attribute.

Fixes #18479 for material-experimental

Author: PooSham

src/material-experimental/mdc-dialog/dialog-content-directives.ts

@@ -139,9 +139,13 @@ export class MatDialogContent {
  */
 @Directive({
   selector: `[mat-dialog-actions], mat-dialog-actions, [matDialogActions]`,
-  host: {'class': 'mat-mdc-dialog-actions mdc-dialog__actions'}
+  host: {
+    'class': 'mat-mdc-dialog-actions mdc-dialog__actions',
+    '[class.mat-mdc-dialog-actions-align-center]': 'align === "center"',
+    '[class.mat-mdc-dialog-actions-align-end]': 'align === "end"'}
 })
 export class MatDialogActions {
+  @Input() align?: 'center' | 'end' = undefined;
 }
 
 

src/material-experimental/mdc-dialog/dialog.scss

@@ -34,13 +34,13 @@ $mat-dialog-button-horizontal-margin: 8px !default;
   // aligns actions at the end of the container.
   justify-content: start;
 
-  &[align='end'] {
-    justify-content: flex-end;
-  }
-
-  &[align='center'] {
+  // .align-center and .align-end are set by directive input "align"
+  &.mat-mdc-dialog-actions-align-center {
     justify-content: center;
   }
+  &.mat-mdc-dialog-actions-align-end {
+    justify-content: flex-end;
+  }
 
   // MDC applies horizontal margin to buttons that have an explicit `mdc-dialog__button`
   // class applied. We can't set this class for projected buttons that consumers of the

src/material-experimental/mdc-dialog/dialog.spec.ts

@@ -1408,6 +1408,14 @@ describe('MDC-based MatDialog', () => {
            expect(container.getAttribute('aria-labelledby'))
                .toBe(title.id, 'Expected the aria-labelledby to match the title id.');
          }));
+
+         it('should add align-* class according to given [align] input in [mat-dialog-actions]', () => {
+          let actions =
+            overlayContainerElement.querySelector('mat-dialog-actions')!;
+  
+          expect(actions).not.toHaveClass('mat-mdc-dialog-actions-align-center', 'Expected action buttons to not have class align-center');
+          expect(actions).toHaveClass('mat-mdc-dialog-actions-align-end', 'Expected action buttons to have class align-end');
+        });
     }
   });
 
@@ -1800,7 +1808,7 @@ class PizzaMsg {
   template: `
     <h1 mat-dialog-title>This is the title</h1>
     <mat-dialog-content>Lorem ipsum dolor sit amet.</mat-dialog-content>
-    <mat-dialog-actions>
+    <mat-dialog-actions align="end">
       <button mat-dialog-close>Close</button>
       <button class="close-with-true" [mat-dialog-close]="true">Close and return true</button>
       <button
@@ -1820,7 +1828,7 @@ class ContentElementDialog {
     <ng-template>
       <h1 mat-dialog-title>This is the title</h1>
       <mat-dialog-content>Lorem ipsum dolor sit amet.</mat-dialog-content>
-      <mat-dialog-actions>
+      <mat-dialog-actions align="end">
         <button mat-dialog-close>Close</button>
         <button class="close-with-true" [mat-dialog-close]="true">Close and return true</button>
         <button