From 1321a16ab146ae464f8efb81e91376b043b49132 Mon Sep 17 00:00:00 2001
From: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date: Mon, 31 Jan 2022 19:27:13 +0100
Subject: [PATCH 01/10] fix(material/dialog): Use align as @Input() in
 MatDialogActions

Squashed commit of the following:

commit 1d6daeadf8e06e38c64fec724d5a8d2899b502d3
Merge: 32764325f 3a98da840
Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date:   Mon Jan 31 19:24:24 2022 +0100

    Merge branch 'master' into align-attr-as-input-in-dialog-actions-#18479-2

commit 32764325fe43737c1c7137b0583d00290af16c25
Merge: 815cf8f26 1f40b7d04
Author: Jean-Philippe <jeanphilippe.green@gmail.com>
Date:   Mon Jan 31 18:54:42 2022 +0100

    Merge branch 'angular:master' into align-attr-as-input-in-dialog-actions-#18479-2

commit 815cf8f26b2e615e37d00dee0b3471973119a42c
Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date:   Mon Jan 10 01:23:12 2022 +0100

    Use directive binding in mdc-dialog demo for align

commit 77fca709f57d6d9396981bef4589a932cb1cae72
Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date:   Mon Jan 10 01:20:43 2022 +0100

    Change actionsAlignment type in dialog demo

commit c87c4aae513d840f6d621ac172915cc25ff5885b
Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date:   Mon Jan 10 00:21:57 2022 +0100

    Revert weird changes to dialog.spec.ts

commit d6deb456240553b299aa6e30b496274ccf1b8e8d
Author: Jean-Philippe <jeanphilippe.green@gmail.com>
Date:   Sun Jan 9 23:30:24 2022 +0100

    Use 'start' as default instead of undefined for align attribute in dialog actions

commit 8d367c1ef4b10ae865d5e08b101189781eed5263
Author: Jean-Philippe <jeanphilippe.green@gmail.com>
Date:   Sun Jan 9 23:05:54 2022 +0100

    Update comments in dialog.scss for more clarity

commit 9d2ac1600e355d28414f702d2d12baaf9b33dac1
Merge: 54d0a600a 3de4ab8fe
Author: Jean-Philippe <jeanphilippe.green@gmail.com>
Date:   Sun Jan 9 22:33:13 2022 +0100

    Merge branch 'angular:master' into align-attr-as-input-in-dialog-actions-#18479

commit 54d0a600a69f28e8ffc97c0ea5e4a2fd7e605b07
Merge: 462d407b1 c79e1d13c
Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date:   Wed Jan 5 21:30:29 2022 +0100

    Merge branch 'angular-master' into align-attr-as-input-in-dialog-actions-#18479

commit c79e1d13cbd1d81c0b0c3110c42473e00fe0db5b
Merge: 462d407b1 03485cd63
Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date:   Wed Jan 5 21:23:17 2022 +0100

    Merge branch 'master' of https://github.com/angular/components into angular-master

commit 462d407b185348404af2b5db8095f069a01b54b5
Author: Jean-Philippe Green <jeanphilippe.green@gmail.com>
Date:   Fri Dec 25 16:18:08 2020 +0100

    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

commit c101f7ff75acdd624e1e599f1f33a67252e36558
Author: Jean-Philippe Green <jeanphilippe.green@gmail.com>
Date:   Fri Dec 25 16:15:01 2020 +0100

    fix(material/dialog): make align attribute into an input of dialog actions directive instead of css

    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
---
 src/dev-app/dialog/dialog-demo.ts                |  6 +++---
 src/dev-app/mdc-dialog/mdc-dialog-demo.ts        |  6 +++---
 .../mdc-dialog/dialog-content-directives.ts      | 10 ++++++++--
 src/material-experimental/mdc-dialog/dialog.scss | 11 ++++++-----
 .../mdc-dialog/dialog.spec.ts                    | 15 +++++++++++++--
 src/material/dialog/dialog-content-directives.ts | 10 ++++++++--
 src/material/dialog/dialog.scss                  | 11 ++++++-----
 src/material/dialog/dialog.spec.ts               | 16 ++++++++++++++--
 8 files changed, 61 insertions(+), 24 deletions(-)

diff --git a/src/dev-app/dialog/dialog-demo.ts b/src/dev-app/dialog/dialog-demo.ts
index 09779b331133..cc2ce89bcabd 100644
--- a/src/dev-app/dialog/dialog-demo.ts
+++ b/src/dev-app/dialog/dialog-demo.ts
@@ -21,7 +21,7 @@ export class DialogDemo {
   dialogRef: MatDialogRef<JazzDialog> | null;
   lastAfterClosedResult: string;
   lastBeforeCloseResult: string;
-  actionsAlignment: string;
+  actionsAlignment: 'start' | 'center' | 'end';
   config = {
     disableClose: false,
     panelClass: 'custom-overlay-pane-class',
@@ -156,7 +156,7 @@ export class JazzDialog {
       </p>
     </mat-dialog-content>
 
-    <mat-dialog-actions [attr.align]="actionsAlignment">
+    <mat-dialog-actions [align]="actionsAlignment">
       <button
         mat-raised-button
         color="primary"
@@ -177,7 +177,7 @@ export class JazzDialog {
   `,
 })
 export class ContentElementDialog {
-  actionsAlignment: string;
+  actionsAlignment: 'start' | 'center' | 'end';
 
   constructor(public dialog: MatDialog) {}
 
diff --git a/src/dev-app/mdc-dialog/mdc-dialog-demo.ts b/src/dev-app/mdc-dialog/mdc-dialog-demo.ts
index f294b14f4293..92e750ea9738 100644
--- a/src/dev-app/mdc-dialog/mdc-dialog-demo.ts
+++ b/src/dev-app/mdc-dialog/mdc-dialog-demo.ts
@@ -29,7 +29,7 @@ export class DialogDemo {
   dialogRef: MatDialogRef<JazzDialog> | null;
   lastAfterClosedResult: string;
   lastBeforeCloseResult: string;
-  actionsAlignment: string;
+  actionsAlignment: 'start' | 'center' | 'end';
   config = {
     disableClose: false,
     panelClass: 'custom-overlay-pane-class',
@@ -173,7 +173,7 @@ export class JazzDialog {
       </p>
     </mat-dialog-content>
 
-    <mat-dialog-actions [attr.align]="actionsAlignment">
+    <mat-dialog-actions [align]="actionsAlignment">
       <button
         mat-raised-button
         color="primary"
@@ -194,7 +194,7 @@ export class JazzDialog {
   `,
 })
 export class ContentElementDialog {
-  actionsAlignment: string;
+  actionsAlignment: 'start' | 'center' | 'end';
 
   constructor(public dialog: MatDialog) {}
 
diff --git a/src/material-experimental/mdc-dialog/dialog-content-directives.ts b/src/material-experimental/mdc-dialog/dialog-content-directives.ts
index 3daa9f0db283..38de7efaf900 100644
--- a/src/material-experimental/mdc-dialog/dialog-content-directives.ts
+++ b/src/material-experimental/mdc-dialog/dialog-content-directives.ts
@@ -141,9 +141,15 @@ 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 {}
+export class MatDialogActions {
+  @Input() align?: 'start' | 'center' | 'end' = 'start';
+}
 
 /**
  * Finds the closest MatDialogRef to an element by looking at the DOM.
diff --git a/src/material-experimental/mdc-dialog/dialog.scss b/src/material-experimental/mdc-dialog/dialog.scss
index 1479e5f62eaa..0eec7117019e 100644
--- a/src/material-experimental/mdc-dialog/dialog.scss
+++ b/src/material-experimental/mdc-dialog/dialog.scss
@@ -29,13 +29,14 @@ $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'] {
+  // .mat-mdc-dialog-actions-align-{center|end} are set by directive input "align"
+  // [align='center'] and [align='right'] are kept for backwards compability
+  &.mat-mdc-dialog-actions-align-center, &[align='center'] {
     justify-content: center;
   }
+  &.mat-mdc-dialog-actions-align-end, &[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
diff --git a/src/material-experimental/mdc-dialog/dialog.spec.ts b/src/material-experimental/mdc-dialog/dialog.spec.ts
index dbe52a813f74..93b0df93f524 100644
--- a/src/material-experimental/mdc-dialog/dialog.spec.ts
+++ b/src/material-experimental/mdc-dialog/dialog.spec.ts
@@ -1670,6 +1670,17 @@ describe('MDC-based MatDialog', () => {
           .withContext('Expected the aria-labelledby to match the title id.')
           .toBe(title.id);
       }));
+
+      it('should add mat-mdc-dialog-actions-align-* class according to given [align] input in [mat-dialog-actions]', () => {
+        let actions = overlayContainerElement.querySelector('mat-dialog-actions')!;
+
+        expect(actions)
+          .withContext('Expected action buttons to not have class align-center')
+          .not.toHaveClass('mat-mdc-dialog-actions-align-center');
+        expect(actions)
+          .withContext('Expected action buttons to have class align-end')
+          .not.toHaveClass('mat-mdc-dialog-actions-align-end');
+      });
     }
   });
 
@@ -2072,7 +2083,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
@@ -2091,7 +2102,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
diff --git a/src/material/dialog/dialog-content-directives.ts b/src/material/dialog/dialog-content-directives.ts
index 5c782353e57a..0751984eb13d 100644
--- a/src/material/dialog/dialog-content-directives.ts
+++ b/src/material/dialog/dialog-content-directives.ts
@@ -145,9 +145,15 @@ export class MatDialogContent {}
  */
 @Directive({
   selector: `[mat-dialog-actions], mat-dialog-actions, [matDialogActions]`,
-  host: {'class': 'mat-dialog-actions'},
+  host: {
+    'class': 'mat-dialog-actions',
+    '[class.mat-dialog-actions-align-center]': 'align === "center"',
+    '[class.mat-dialog-actions-align-end]': 'align === "end"',
+  },
 })
-export class MatDialogActions {}
+export class MatDialogActions {
+  @Input() align?: 'start' | 'center' | 'end' = 'start';
+}
 
 /**
  * Finds the closest MatDialogRef to an element by looking at the DOM.
diff --git a/src/material/dialog/dialog.scss b/src/material/dialog/dialog.scss
index ca5f92cde2af..6ba8ad382925 100644
--- a/src/material/dialog/dialog.scss
+++ b/src/material/dialog/dialog.scss
@@ -56,13 +56,14 @@ $button-margin: 8px !default;
   // Pull the actions down to avoid their padding stacking with the dialog's padding.
   margin-bottom: -$padding;
 
-  &[align='end'] {
-    justify-content: flex-end;
-  }
-
-  &[align='center'] {
+  // .mat-dialog-actions-align-{center|end} are set by directive input "align"
+  // [align='center'] and [align='right'] are kept for backwards compability
+  &.mat-dialog-actions-align-center, &[align='center'] {
     justify-content: center;
   }
+  &.mat-dialog-actions-align-end, &[align='end'] {
+    justify-content: flex-end;
+  }
 
   .mat-button-base + .mat-button-base,
   .mat-mdc-button-base + .mat-mdc-button-base {
diff --git a/src/material/dialog/dialog.spec.ts b/src/material/dialog/dialog.spec.ts
index 1bcd69157086..176271f210bf 100644
--- a/src/material/dialog/dialog.spec.ts
+++ b/src/material/dialog/dialog.spec.ts
@@ -1733,6 +1733,18 @@ describe('MatDialog', () => {
           .withContext('Expected the aria-labelledby to match the title id.')
           .toBe(title.id);
       }));
+
+      it('should add mat-dialog-actions-align-* class according to given [align] input in [mat-dialog-actions]', () => {
+        let actions = overlayContainerElement.querySelector('mat-dialog-actions')!;
+
+        expect(actions)
+          .withContext('Expected action buttons to not have class mat-dialog-actions-align-center')
+          .not.toHaveClass('mat-dialog-actions-align-center');
+
+        expect(actions)
+          .withContext('Expected action buttons to have class mat-dialog-actions-align-end')
+          .toHaveClass('mat-dialog-actions-align-end');
+      });
     }
   });
 
@@ -2116,7 +2128,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
@@ -2135,7 +2147,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

From d7a9cbb709b49881b785881014bf2308fa04c861 Mon Sep 17 00:00:00 2001
From: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date: Mon, 31 Jan 2022 19:27:13 +0100
Subject: [PATCH 02/10] fix(material/dialog): Use align as @Input() in
 MatDialogActions

Squashed commit of the following:

commit 1d6daeadf8e06e38c64fec724d5a8d2899b502d3
Merge: 32764325f 3a98da840
Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date:   Mon Jan 31 19:24:24 2022 +0100

    Merge branch 'master' into align-attr-as-input-in-dialog-actions-#18479-2

commit 32764325fe43737c1c7137b0583d00290af16c25
Merge: 815cf8f26 1f40b7d04
Author: Jean-Philippe <jeanphilippe.green@gmail.com>
Date:   Mon Jan 31 18:54:42 2022 +0100

    Merge branch 'angular:master' into align-attr-as-input-in-dialog-actions-#18479-2

commit 815cf8f26b2e615e37d00dee0b3471973119a42c
Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date:   Mon Jan 10 01:23:12 2022 +0100

    Use directive binding in mdc-dialog demo for align

commit 77fca709f57d6d9396981bef4589a932cb1cae72
Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date:   Mon Jan 10 01:20:43 2022 +0100

    Change actionsAlignment type in dialog demo

commit c87c4aae513d840f6d621ac172915cc25ff5885b
Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date:   Mon Jan 10 00:21:57 2022 +0100

    Revert weird changes to dialog.spec.ts

commit d6deb456240553b299aa6e30b496274ccf1b8e8d
Author: Jean-Philippe <jeanphilippe.green@gmail.com>
Date:   Sun Jan 9 23:30:24 2022 +0100

    Use 'start' as default instead of undefined for align attribute in dialog actions

commit 8d367c1ef4b10ae865d5e08b101189781eed5263
Author: Jean-Philippe <jeanphilippe.green@gmail.com>
Date:   Sun Jan 9 23:05:54 2022 +0100

    Update comments in dialog.scss for more clarity

commit 9d2ac1600e355d28414f702d2d12baaf9b33dac1
Merge: 54d0a600a 3de4ab8fe
Author: Jean-Philippe <jeanphilippe.green@gmail.com>
Date:   Sun Jan 9 22:33:13 2022 +0100

    Merge branch 'angular:master' into align-attr-as-input-in-dialog-actions-#18479

commit 54d0a600a69f28e8ffc97c0ea5e4a2fd7e605b07
Merge: 462d407b1 c79e1d13c
Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date:   Wed Jan 5 21:30:29 2022 +0100

    Merge branch 'angular-master' into align-attr-as-input-in-dialog-actions-#18479

commit c79e1d13cbd1d81c0b0c3110c42473e00fe0db5b
Merge: 462d407b1 03485cd63
Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date:   Wed Jan 5 21:23:17 2022 +0100

    Merge branch 'master' of https://github.com/angular/components into angular-master

commit 462d407b185348404af2b5db8095f069a01b54b5
Author: Jean-Philippe Green <jeanphilippe.green@gmail.com>
Date:   Fri Dec 25 16:18:08 2020 +0100

    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

commit c101f7ff75acdd624e1e599f1f33a67252e36558
Author: Jean-Philippe Green <jeanphilippe.green@gmail.com>
Date:   Fri Dec 25 16:15:01 2020 +0100

    fix(material/dialog): make align attribute into an input of dialog actions directive instead of css

    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
---
 src/dev-app/dialog/dialog-demo.ts                |  6 +++---
 src/dev-app/mdc-dialog/mdc-dialog-demo.ts        |  6 +++---
 .../mdc-dialog/dialog-content-directives.ts      | 10 ++++++++--
 src/material-experimental/mdc-dialog/dialog.scss | 11 ++++++-----
 .../mdc-dialog/dialog.spec.ts                    | 15 +++++++++++++--
 src/material/dialog/dialog-content-directives.ts | 10 ++++++++--
 src/material/dialog/dialog.scss                  | 11 ++++++-----
 src/material/dialog/dialog.spec.ts               | 16 ++++++++++++++--
 8 files changed, 61 insertions(+), 24 deletions(-)

diff --git a/src/dev-app/dialog/dialog-demo.ts b/src/dev-app/dialog/dialog-demo.ts
index 09779b331133..cc2ce89bcabd 100644
--- a/src/dev-app/dialog/dialog-demo.ts
+++ b/src/dev-app/dialog/dialog-demo.ts
@@ -21,7 +21,7 @@ export class DialogDemo {
   dialogRef: MatDialogRef<JazzDialog> | null;
   lastAfterClosedResult: string;
   lastBeforeCloseResult: string;
-  actionsAlignment: string;
+  actionsAlignment: 'start' | 'center' | 'end';
   config = {
     disableClose: false,
     panelClass: 'custom-overlay-pane-class',
@@ -156,7 +156,7 @@ export class JazzDialog {
       </p>
     </mat-dialog-content>
 
-    <mat-dialog-actions [attr.align]="actionsAlignment">
+    <mat-dialog-actions [align]="actionsAlignment">
       <button
         mat-raised-button
         color="primary"
@@ -177,7 +177,7 @@ export class JazzDialog {
   `,
 })
 export class ContentElementDialog {
-  actionsAlignment: string;
+  actionsAlignment: 'start' | 'center' | 'end';
 
   constructor(public dialog: MatDialog) {}
 
diff --git a/src/dev-app/mdc-dialog/mdc-dialog-demo.ts b/src/dev-app/mdc-dialog/mdc-dialog-demo.ts
index f294b14f4293..92e750ea9738 100644
--- a/src/dev-app/mdc-dialog/mdc-dialog-demo.ts
+++ b/src/dev-app/mdc-dialog/mdc-dialog-demo.ts
@@ -29,7 +29,7 @@ export class DialogDemo {
   dialogRef: MatDialogRef<JazzDialog> | null;
   lastAfterClosedResult: string;
   lastBeforeCloseResult: string;
-  actionsAlignment: string;
+  actionsAlignment: 'start' | 'center' | 'end';
   config = {
     disableClose: false,
     panelClass: 'custom-overlay-pane-class',
@@ -173,7 +173,7 @@ export class JazzDialog {
       </p>
     </mat-dialog-content>
 
-    <mat-dialog-actions [attr.align]="actionsAlignment">
+    <mat-dialog-actions [align]="actionsAlignment">
       <button
         mat-raised-button
         color="primary"
@@ -194,7 +194,7 @@ export class JazzDialog {
   `,
 })
 export class ContentElementDialog {
-  actionsAlignment: string;
+  actionsAlignment: 'start' | 'center' | 'end';
 
   constructor(public dialog: MatDialog) {}
 
diff --git a/src/material-experimental/mdc-dialog/dialog-content-directives.ts b/src/material-experimental/mdc-dialog/dialog-content-directives.ts
index 3daa9f0db283..38de7efaf900 100644
--- a/src/material-experimental/mdc-dialog/dialog-content-directives.ts
+++ b/src/material-experimental/mdc-dialog/dialog-content-directives.ts
@@ -141,9 +141,15 @@ 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 {}
+export class MatDialogActions {
+  @Input() align?: 'start' | 'center' | 'end' = 'start';
+}
 
 /**
  * Finds the closest MatDialogRef to an element by looking at the DOM.
diff --git a/src/material-experimental/mdc-dialog/dialog.scss b/src/material-experimental/mdc-dialog/dialog.scss
index 1479e5f62eaa..0eec7117019e 100644
--- a/src/material-experimental/mdc-dialog/dialog.scss
+++ b/src/material-experimental/mdc-dialog/dialog.scss
@@ -29,13 +29,14 @@ $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'] {
+  // .mat-mdc-dialog-actions-align-{center|end} are set by directive input "align"
+  // [align='center'] and [align='right'] are kept for backwards compability
+  &.mat-mdc-dialog-actions-align-center, &[align='center'] {
     justify-content: center;
   }
+  &.mat-mdc-dialog-actions-align-end, &[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
diff --git a/src/material-experimental/mdc-dialog/dialog.spec.ts b/src/material-experimental/mdc-dialog/dialog.spec.ts
index dbe52a813f74..93b0df93f524 100644
--- a/src/material-experimental/mdc-dialog/dialog.spec.ts
+++ b/src/material-experimental/mdc-dialog/dialog.spec.ts
@@ -1670,6 +1670,17 @@ describe('MDC-based MatDialog', () => {
           .withContext('Expected the aria-labelledby to match the title id.')
           .toBe(title.id);
       }));
+
+      it('should add mat-mdc-dialog-actions-align-* class according to given [align] input in [mat-dialog-actions]', () => {
+        let actions = overlayContainerElement.querySelector('mat-dialog-actions')!;
+
+        expect(actions)
+          .withContext('Expected action buttons to not have class align-center')
+          .not.toHaveClass('mat-mdc-dialog-actions-align-center');
+        expect(actions)
+          .withContext('Expected action buttons to have class align-end')
+          .not.toHaveClass('mat-mdc-dialog-actions-align-end');
+      });
     }
   });
 
@@ -2072,7 +2083,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
@@ -2091,7 +2102,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
diff --git a/src/material/dialog/dialog-content-directives.ts b/src/material/dialog/dialog-content-directives.ts
index 5c782353e57a..0751984eb13d 100644
--- a/src/material/dialog/dialog-content-directives.ts
+++ b/src/material/dialog/dialog-content-directives.ts
@@ -145,9 +145,15 @@ export class MatDialogContent {}
  */
 @Directive({
   selector: `[mat-dialog-actions], mat-dialog-actions, [matDialogActions]`,
-  host: {'class': 'mat-dialog-actions'},
+  host: {
+    'class': 'mat-dialog-actions',
+    '[class.mat-dialog-actions-align-center]': 'align === "center"',
+    '[class.mat-dialog-actions-align-end]': 'align === "end"',
+  },
 })
-export class MatDialogActions {}
+export class MatDialogActions {
+  @Input() align?: 'start' | 'center' | 'end' = 'start';
+}
 
 /**
  * Finds the closest MatDialogRef to an element by looking at the DOM.
diff --git a/src/material/dialog/dialog.scss b/src/material/dialog/dialog.scss
index ca5f92cde2af..6ba8ad382925 100644
--- a/src/material/dialog/dialog.scss
+++ b/src/material/dialog/dialog.scss
@@ -56,13 +56,14 @@ $button-margin: 8px !default;
   // Pull the actions down to avoid their padding stacking with the dialog's padding.
   margin-bottom: -$padding;
 
-  &[align='end'] {
-    justify-content: flex-end;
-  }
-
-  &[align='center'] {
+  // .mat-dialog-actions-align-{center|end} are set by directive input "align"
+  // [align='center'] and [align='right'] are kept for backwards compability
+  &.mat-dialog-actions-align-center, &[align='center'] {
     justify-content: center;
   }
+  &.mat-dialog-actions-align-end, &[align='end'] {
+    justify-content: flex-end;
+  }
 
   .mat-button-base + .mat-button-base,
   .mat-mdc-button-base + .mat-mdc-button-base {
diff --git a/src/material/dialog/dialog.spec.ts b/src/material/dialog/dialog.spec.ts
index 1bcd69157086..176271f210bf 100644
--- a/src/material/dialog/dialog.spec.ts
+++ b/src/material/dialog/dialog.spec.ts
@@ -1733,6 +1733,18 @@ describe('MatDialog', () => {
           .withContext('Expected the aria-labelledby to match the title id.')
           .toBe(title.id);
       }));
+
+      it('should add mat-dialog-actions-align-* class according to given [align] input in [mat-dialog-actions]', () => {
+        let actions = overlayContainerElement.querySelector('mat-dialog-actions')!;
+
+        expect(actions)
+          .withContext('Expected action buttons to not have class mat-dialog-actions-align-center')
+          .not.toHaveClass('mat-dialog-actions-align-center');
+
+        expect(actions)
+          .withContext('Expected action buttons to have class mat-dialog-actions-align-end')
+          .toHaveClass('mat-dialog-actions-align-end');
+      });
     }
   });
 
@@ -2116,7 +2128,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
@@ -2135,7 +2147,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

From b4a9cb3181c8d2eccf9a947411d250cf0ec485fb Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Tue, 1 Feb 2022 17:09:37 +0100
Subject: [PATCH 03/10] fixup! fix(material/dialog): Use align as @Input() in
 MatDialogActions

ds
---
 WORKSPACE | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/WORKSPACE b/WORKSPACE
index 23e4310b05a6..668e2160d436 100644
--- a/WORKSPACE
+++ b/WORKSPACE
@@ -16,7 +16,7 @@ http_archive(
 # Add sass rules
 http_archive(
     name = "io_bazel_rules_sass",
-    sha256 = "68b58c69cda77c4f765be92cf076400d882ea2f10d66eaf369ed69409afab5be",
+    sha256 = "bfb89ca97a4ad452ca5f623dfde23d2a5f3a848a97478d715881b69b4767d3bb",
     strip_prefix = "rules_sass-1.49.4",
     urls = [
         "https://github.com/bazelbuild/rules_sass/archive/1.49.4.zip",

From e0f4885b3cce80c923d19bfdffa08dd86464299b Mon Sep 17 00:00:00 2001
From: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date: Tue, 1 Feb 2022 17:50:37 +0100
Subject: [PATCH 04/10] fix(material/dialog): fix mismatching test names
 between mdc and non-mdc

---
 src/material-experimental/mdc-dialog/dialog.spec.ts | 2 +-
 src/material/dialog/dialog.spec.ts                  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/material-experimental/mdc-dialog/dialog.spec.ts b/src/material-experimental/mdc-dialog/dialog.spec.ts
index 93b0df93f524..aa93ac97a6a6 100644
--- a/src/material-experimental/mdc-dialog/dialog.spec.ts
+++ b/src/material-experimental/mdc-dialog/dialog.spec.ts
@@ -1671,7 +1671,7 @@ describe('MDC-based MatDialog', () => {
           .toBe(title.id);
       }));
 
-      it('should add mat-mdc-dialog-actions-align-* class according to given [align] input in [mat-dialog-actions]', () => {
+      it('should add correct css class according to given [align] input in [mat-dialog-actions]', () => {
         let actions = overlayContainerElement.querySelector('mat-dialog-actions')!;
 
         expect(actions)
diff --git a/src/material/dialog/dialog.spec.ts b/src/material/dialog/dialog.spec.ts
index 176271f210bf..c874e01e4389 100644
--- a/src/material/dialog/dialog.spec.ts
+++ b/src/material/dialog/dialog.spec.ts
@@ -1734,7 +1734,7 @@ describe('MatDialog', () => {
           .toBe(title.id);
       }));
 
-      it('should add mat-dialog-actions-align-* class according to given [align] input in [mat-dialog-actions]', () => {
+      it('should add correct css class according to given [align] input in [mat-dialog-actions]', () => {
         let actions = overlayContainerElement.querySelector('mat-dialog-actions')!;
 
         expect(actions)

From 69491e1efe727ff39b4e23b9598a88e56e20748e Mon Sep 17 00:00:00 2001
From: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date: Tue, 1 Feb 2022 17:50:37 +0100
Subject: [PATCH 05/10] fix(material/dialog): fix mismatching test names
 between mdc and non-mdc

---
 src/material-experimental/mdc-dialog/dialog.spec.ts | 2 +-
 src/material/dialog/dialog.spec.ts                  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/material-experimental/mdc-dialog/dialog.spec.ts b/src/material-experimental/mdc-dialog/dialog.spec.ts
index 93b0df93f524..aa93ac97a6a6 100644
--- a/src/material-experimental/mdc-dialog/dialog.spec.ts
+++ b/src/material-experimental/mdc-dialog/dialog.spec.ts
@@ -1671,7 +1671,7 @@ describe('MDC-based MatDialog', () => {
           .toBe(title.id);
       }));
 
-      it('should add mat-mdc-dialog-actions-align-* class according to given [align] input in [mat-dialog-actions]', () => {
+      it('should add correct css class according to given [align] input in [mat-dialog-actions]', () => {
         let actions = overlayContainerElement.querySelector('mat-dialog-actions')!;
 
         expect(actions)
diff --git a/src/material/dialog/dialog.spec.ts b/src/material/dialog/dialog.spec.ts
index 176271f210bf..c874e01e4389 100644
--- a/src/material/dialog/dialog.spec.ts
+++ b/src/material/dialog/dialog.spec.ts
@@ -1734,7 +1734,7 @@ describe('MatDialog', () => {
           .toBe(title.id);
       }));
 
-      it('should add mat-dialog-actions-align-* class according to given [align] input in [mat-dialog-actions]', () => {
+      it('should add correct css class according to given [align] input in [mat-dialog-actions]', () => {
         let actions = overlayContainerElement.querySelector('mat-dialog-actions')!;
 
         expect(actions)

From 33ada37e3428418ee7c6ad932d98648832ba0376 Mon Sep 17 00:00:00 2001
From: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date: Tue, 1 Feb 2022 21:10:12 +0100
Subject: [PATCH 06/10] fix(material/dialog): update golden api for dialog

---
 .../mdc-dialog/dialog-content-directives.ts                    | 3 +++
 src/material/dialog/dialog-content-directives.ts               | 3 +++
 tools/public_api_guard/material/dialog.md                      | 3 ++-
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/material-experimental/mdc-dialog/dialog-content-directives.ts b/src/material-experimental/mdc-dialog/dialog-content-directives.ts
index 38de7efaf900..ea444e87addc 100644
--- a/src/material-experimental/mdc-dialog/dialog-content-directives.ts
+++ b/src/material-experimental/mdc-dialog/dialog-content-directives.ts
@@ -148,6 +148,9 @@ export class MatDialogContent {}
   },
 })
 export class MatDialogActions {
+  /**
+   * Horizontal alignment of action buttons.
+   */
   @Input() align?: 'start' | 'center' | 'end' = 'start';
 }
 
diff --git a/src/material/dialog/dialog-content-directives.ts b/src/material/dialog/dialog-content-directives.ts
index 0751984eb13d..2b5f44715da0 100644
--- a/src/material/dialog/dialog-content-directives.ts
+++ b/src/material/dialog/dialog-content-directives.ts
@@ -152,6 +152,9 @@ export class MatDialogContent {}
   },
 })
 export class MatDialogActions {
+  /**
+   * Horizontal alignment of action buttons.
+   */
   @Input() align?: 'start' | 'center' | 'end' = 'start';
 }
 
diff --git a/tools/public_api_guard/material/dialog.md b/tools/public_api_guard/material/dialog.md
index 35da0a953e73..dbebade3802a 100644
--- a/tools/public_api_guard/material/dialog.md
+++ b/tools/public_api_guard/material/dialog.md
@@ -96,8 +96,9 @@ export class MatDialog extends _MatDialogBase<MatDialogContainer> {
 
 // @public
 export class MatDialogActions {
+    align?: 'start' | 'center' | 'end';
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogActions, "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogActions, "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", never, { "align": "align"; }, {}, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogActions, never>;
 }

From cf01f0583cbb78091cc702af574a2a17b90744f5 Mon Sep 17 00:00:00 2001
From: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date: Tue, 1 Feb 2022 21:26:03 +0100
Subject: [PATCH 07/10] fix(material/dialog): Fix mdc action align test

---
 src/material-experimental/mdc-dialog/dialog.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/material-experimental/mdc-dialog/dialog.spec.ts b/src/material-experimental/mdc-dialog/dialog.spec.ts
index aa93ac97a6a6..6c51b2dd8763 100644
--- a/src/material-experimental/mdc-dialog/dialog.spec.ts
+++ b/src/material-experimental/mdc-dialog/dialog.spec.ts
@@ -1679,7 +1679,7 @@ describe('MDC-based MatDialog', () => {
           .not.toHaveClass('mat-mdc-dialog-actions-align-center');
         expect(actions)
           .withContext('Expected action buttons to have class align-end')
-          .not.toHaveClass('mat-mdc-dialog-actions-align-end');
+          .toHaveClass('mat-mdc-dialog-actions-align-end');
       });
     }
   });

From b060272e6dc87b4a89d6887eb6ff123cc2ee596b Mon Sep 17 00:00:00 2001
From: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date: Tue, 1 Feb 2022 21:10:12 +0100
Subject: [PATCH 08/10] fix(material/dialog): update golden api for dialog

---
 .../mdc-dialog/dialog-content-directives.ts                    | 3 +++
 src/material/dialog/dialog-content-directives.ts               | 3 +++
 tools/public_api_guard/material/dialog.md                      | 3 ++-
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/material-experimental/mdc-dialog/dialog-content-directives.ts b/src/material-experimental/mdc-dialog/dialog-content-directives.ts
index 38de7efaf900..ea444e87addc 100644
--- a/src/material-experimental/mdc-dialog/dialog-content-directives.ts
+++ b/src/material-experimental/mdc-dialog/dialog-content-directives.ts
@@ -148,6 +148,9 @@ export class MatDialogContent {}
   },
 })
 export class MatDialogActions {
+  /**
+   * Horizontal alignment of action buttons.
+   */
   @Input() align?: 'start' | 'center' | 'end' = 'start';
 }
 
diff --git a/src/material/dialog/dialog-content-directives.ts b/src/material/dialog/dialog-content-directives.ts
index 0751984eb13d..2b5f44715da0 100644
--- a/src/material/dialog/dialog-content-directives.ts
+++ b/src/material/dialog/dialog-content-directives.ts
@@ -152,6 +152,9 @@ export class MatDialogContent {}
   },
 })
 export class MatDialogActions {
+  /**
+   * Horizontal alignment of action buttons.
+   */
   @Input() align?: 'start' | 'center' | 'end' = 'start';
 }
 
diff --git a/tools/public_api_guard/material/dialog.md b/tools/public_api_guard/material/dialog.md
index 35da0a953e73..dbebade3802a 100644
--- a/tools/public_api_guard/material/dialog.md
+++ b/tools/public_api_guard/material/dialog.md
@@ -96,8 +96,9 @@ export class MatDialog extends _MatDialogBase<MatDialogContainer> {
 
 // @public
 export class MatDialogActions {
+    align?: 'start' | 'center' | 'end';
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogActions, "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogActions, "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", never, { "align": "align"; }, {}, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogActions, never>;
 }

From 261cb7ccf4d438a017de1389f45760b42fcd8f5a Mon Sep 17 00:00:00 2001
From: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date: Tue, 1 Feb 2022 21:26:03 +0100
Subject: [PATCH 09/10] fix(material/dialog): Fix mdc action align test

---
 src/material-experimental/mdc-dialog/dialog.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/material-experimental/mdc-dialog/dialog.spec.ts b/src/material-experimental/mdc-dialog/dialog.spec.ts
index aa93ac97a6a6..6c51b2dd8763 100644
--- a/src/material-experimental/mdc-dialog/dialog.spec.ts
+++ b/src/material-experimental/mdc-dialog/dialog.spec.ts
@@ -1679,7 +1679,7 @@ describe('MDC-based MatDialog', () => {
           .not.toHaveClass('mat-mdc-dialog-actions-align-center');
         expect(actions)
           .withContext('Expected action buttons to have class align-end')
-          .not.toHaveClass('mat-mdc-dialog-actions-align-end');
+          .toHaveClass('mat-mdc-dialog-actions-align-end');
       });
     }
   });

From 26fabcd4baff24a20aae93c23a36bac391e8bdd6 Mon Sep 17 00:00:00 2001
From: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date: Wed, 2 Feb 2022 22:28:04 +0100
Subject: [PATCH 10/10] fix(material/dialog): Squashed commit of the following:

commit 261cb7ccf4d438a017de1389f45760b42fcd8f5a
Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date:   Tue Feb 1 21:26:03 2022 +0100

    fix(material/dialog): Fix mdc action align test

commit b060272e6dc87b4a89d6887eb6ff123cc2ee596b
Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date:   Tue Feb 1 21:10:12 2022 +0100

    fix(material/dialog): update golden api for dialog

commit 69491e1efe727ff39b4e23b9598a88e56e20748e
Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date:   Tue Feb 1 17:50:37 2022 +0100

    fix(material/dialog): fix mismatching test names between mdc and non-mdc

commit b4a9cb3181c8d2eccf9a947411d250cf0ec485fb
Author: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date:   Tue Feb 1 17:09:37 2022 +0100

    fixup! fix(material/dialog): Use align as @Input() in MatDialogActions

    ds

commit d7a9cbb709b49881b785881014bf2308fa04c861
Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date:   Mon Jan 31 19:27:13 2022 +0100

    fix(material/dialog): Use align as @Input() in MatDialogActions

    Squashed commit of the following:

    commit 1d6daeadf8e06e38c64fec724d5a8d2899b502d3
    Merge: 32764325f 3a98da840
    Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
    Date:   Mon Jan 31 19:24:24 2022 +0100

        Merge branch 'master' into align-attr-as-input-in-dialog-actions-#18479-2

    commit 32764325fe43737c1c7137b0583d00290af16c25
    Merge: 815cf8f26 1f40b7d04
    Author: Jean-Philippe <jeanphilippe.green@gmail.com>
    Date:   Mon Jan 31 18:54:42 2022 +0100

        Merge branch 'angular:master' into align-attr-as-input-in-dialog-actions-#18479-2

    commit 815cf8f26b2e615e37d00dee0b3471973119a42c
    Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
    Date:   Mon Jan 10 01:23:12 2022 +0100

        Use directive binding in mdc-dialog demo for align

    commit 77fca709f57d6d9396981bef4589a932cb1cae72
    Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
    Date:   Mon Jan 10 01:20:43 2022 +0100

        Change actionsAlignment type in dialog demo

    commit c87c4aae513d840f6d621ac172915cc25ff5885b
    Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
    Date:   Mon Jan 10 00:21:57 2022 +0100

        Revert weird changes to dialog.spec.ts

    commit d6deb456240553b299aa6e30b496274ccf1b8e8d
    Author: Jean-Philippe <jeanphilippe.green@gmail.com>
    Date:   Sun Jan 9 23:30:24 2022 +0100

        Use 'start' as default instead of undefined for align attribute in dialog actions

    commit 8d367c1ef4b10ae865d5e08b101189781eed5263
    Author: Jean-Philippe <jeanphilippe.green@gmail.com>
    Date:   Sun Jan 9 23:05:54 2022 +0100

        Update comments in dialog.scss for more clarity

    commit 9d2ac1600e355d28414f702d2d12baaf9b33dac1
    Merge: 54d0a600a 3de4ab8fe
    Author: Jean-Philippe <jeanphilippe.green@gmail.com>
    Date:   Sun Jan 9 22:33:13 2022 +0100

        Merge branch 'angular:master' into align-attr-as-input-in-dialog-actions-#18479

    commit 54d0a600a69f28e8ffc97c0ea5e4a2fd7e605b07
    Merge: 462d407b1 c79e1d13c
    Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
    Date:   Wed Jan 5 21:30:29 2022 +0100

        Merge branch 'angular-master' into align-attr-as-input-in-dialog-actions-#18479

    commit c79e1d13cbd1d81c0b0c3110c42473e00fe0db5b
    Merge: 462d407b1 03485cd63
    Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
    Date:   Wed Jan 5 21:23:17 2022 +0100

        Merge branch 'master' of https://github.com/angular/components into angular-master

    commit 462d407b185348404af2b5db8095f069a01b54b5
    Author: Jean-Philippe Green <jeanphilippe.green@gmail.com>
    Date:   Fri Dec 25 16:18:08 2020 +0100

        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

    commit c101f7ff75acdd624e1e599f1f33a67252e36558
    Author: Jean-Philippe Green <jeanphilippe.green@gmail.com>
    Date:   Fri Dec 25 16:15:01 2020 +0100

        fix(material/dialog): make align attribute into an input of dialog actions directive instead of css

        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

commit a74d92e33df365558eaf54661db32de379d68885
Author: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date:   Tue Feb 1 16:43:35 2022 +0100

    fix(material/menu): adjust overlay size when amount of items changes (#21457)

    Currently we lock the menu into a position after it is opened so that it doesn't jump
    around when the user scrolls, but this means that if the amount of items changes,
    it might not be the optimal position anymore.

    These changes add some code to re-calculate the position if the amount of items changes.

    Fixes #21456.

commit f201634243dc8b28d6a08d3eedf9e813668825a4
Author: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date:   Tue Feb 1 13:22:16 2022 +0100

    build: fix rules_sass error (#24331)

    Updates to the latest version of `rules_sass` in order to fix an error that is currently breaking the build.
---
 WORKSPACE                                     |  6 ++---
 package.json                                  |  2 +-
 .../flexible-connected-position-strategy.ts   | 12 ++++++---
 .../mdc-menu/menu.spec.ts                     | 26 ++++++++++++++++++-
 src/material/menu/menu-trigger.ts             |  9 ++++++-
 src/material/menu/menu.spec.ts                | 26 ++++++++++++++++++-
 src/material/menu/menu.ts                     |  2 +-
 tools/public_api_guard/material/menu.md       |  1 +
 yarn.lock                                     | 11 +++++++-
 9 files changed, 83 insertions(+), 12 deletions(-)

diff --git a/WORKSPACE b/WORKSPACE
index 9b937e035efe..668e2160d436 100644
--- a/WORKSPACE
+++ b/WORKSPACE
@@ -16,10 +16,10 @@ http_archive(
 # Add sass rules
 http_archive(
     name = "io_bazel_rules_sass",
-    sha256 = "903858e0fb5eda0b36d37e1ce4cbcfbe03f65a5f153d894dc8a9894a4884e564",
-    strip_prefix = "rules_sass-1.49.0",
+    sha256 = "bfb89ca97a4ad452ca5f623dfde23d2a5f3a848a97478d715881b69b4767d3bb",
+    strip_prefix = "rules_sass-1.49.4",
     urls = [
-        "https://github.com/bazelbuild/rules_sass/archive/1.49.0.zip",
+        "https://github.com/bazelbuild/rules_sass/archive/1.49.4.zip",
     ],
 )
 
diff --git a/package.json b/package.json
index 677687fd463a..c3cbc840a417 100644
--- a/package.json
+++ b/package.json
@@ -201,7 +201,7 @@
     "requirejs": "^2.3.6",
     "rollup": "^2.66.1",
     "rollup-plugin-sourcemaps": "^0.6.3",
-    "sass": "^1.49.0",
+    "sass": "^1.49.4",
     "selenium-webdriver": "^3.6.0",
     "semver": "^7.3.5",
     "send": "^0.17.2",
diff --git a/src/cdk/overlay/position/flexible-connected-position-strategy.ts b/src/cdk/overlay/position/flexible-connected-position-strategy.ts
index df943e0d39cf..33bd7193fb74 100644
--- a/src/cdk/overlay/position/flexible-connected-position-strategy.ts
+++ b/src/cdk/overlay/position/flexible-connected-position-strategy.ts
@@ -360,16 +360,22 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
    * allows one to re-align the panel without changing the orientation of the panel.
    */
   reapplyLastPosition(): void {
-    if (!this._isDisposed && (!this._platform || this._platform.isBrowser)) {
+    if (this._isDisposed || !this._platform.isBrowser) {
+      return;
+    }
+
+    const lastPosition = this._lastPosition;
+
+    if (lastPosition) {
       this._originRect = this._getOriginRect();
       this._overlayRect = this._pane.getBoundingClientRect();
       this._viewportRect = this._getNarrowedViewportRect();
       this._containerRect = this._overlayContainer.getContainerElement().getBoundingClientRect();
 
-      const lastPosition = this._lastPosition || this._preferredPositions[0];
       const originPoint = this._getOriginPoint(this._originRect, this._containerRect, lastPosition);
-
       this._applyPosition(lastPosition, originPoint);
+    } else {
+      this.apply();
     }
   }
 
diff --git a/src/material-experimental/mdc-menu/menu.spec.ts b/src/material-experimental/mdc-menu/menu.spec.ts
index 3143f9a86a3e..de7527db3587 100644
--- a/src/material-experimental/mdc-menu/menu.spec.ts
+++ b/src/material-experimental/mdc-menu/menu.spec.ts
@@ -41,7 +41,7 @@ import {
   MockNgZone,
 } from '../../cdk/testing/private';
 import {Subject} from 'rxjs';
-import {ScrollDispatcher} from '@angular/cdk/scrolling';
+import {ScrollDispatcher, ViewportRuler} from '@angular/cdk/scrolling';
 import {FocusMonitor} from '@angular/cdk/a11y';
 import {
   MAT_MENU_SCROLL_STRATEGY,
@@ -57,6 +57,7 @@ const MENU_PANEL_TOP_PADDING = 8;
 describe('MDC-based MatMenu', () => {
   let overlayContainerElement: HTMLElement;
   let focusMonitor: FocusMonitor;
+  let viewportRuler: ViewportRuler;
 
   function createComponent<T>(
     component: Type<T>,
@@ -71,6 +72,7 @@ describe('MDC-based MatMenu', () => {
 
     overlayContainerElement = TestBed.inject(OverlayContainer).getContainerElement();
     focusMonitor = TestBed.inject(FocusMonitor);
+    viewportRuler = TestBed.inject(ViewportRuler);
     const fixture = TestBed.createComponent<T>(component);
     window.scroll(0, 0);
     return fixture;
@@ -1142,6 +1144,28 @@ describe('MDC-based MatMenu', () => {
     expect(panel.classList).toContain('mat-menu-after');
   }));
 
+  it('should keep the panel in the viewport when more items are added while open', () => {
+    const fixture = createComponent(SimpleMenu, [], [FakeIcon]);
+    fixture.detectChanges();
+
+    const triggerEl = fixture.componentInstance.triggerEl.nativeElement;
+    triggerEl.style.position = 'absolute';
+    triggerEl.style.left = '200px';
+    triggerEl.style.bottom = '300px';
+    triggerEl.click();
+    fixture.detectChanges();
+
+    const panel = overlayContainerElement.querySelector('.mat-mdc-menu-panel')!;
+    const viewportHeight = viewportRuler.getViewportSize().height;
+    let panelRect = panel.getBoundingClientRect();
+    expect(Math.floor(panelRect.bottom)).toBeLessThan(viewportHeight);
+
+    fixture.componentInstance.extraItems = new Array(50).fill('Hello there');
+    fixture.detectChanges();
+    panelRect = panel.getBoundingClientRect();
+    expect(Math.floor(panelRect.bottom)).toBe(viewportHeight);
+  });
+
   describe('lazy rendering', () => {
     it('should be able to render the menu content lazily', fakeAsync(() => {
       const fixture = createComponent(SimpleLazyMenu);
diff --git a/src/material/menu/menu-trigger.ts b/src/material/menu/menu-trigger.ts
index d51c42715890..3f4f1c42e8bf 100644
--- a/src/material/menu/menu-trigger.ts
+++ b/src/material/menu/menu-trigger.ts
@@ -278,8 +278,9 @@ export abstract class _MatMenuTriggerBase implements AfterContentInit, OnDestroy
 
     const overlayRef = this._createOverlay();
     const overlayConfig = overlayRef.getConfig();
+    const positionStrategy = overlayConfig.positionStrategy as FlexibleConnectedPositionStrategy;
 
-    this._setPosition(overlayConfig.positionStrategy as FlexibleConnectedPositionStrategy);
+    this._setPosition(positionStrategy);
     overlayConfig.hasBackdrop =
       this.menu.hasBackdrop == null ? !this.triggersSubmenu() : this.menu.hasBackdrop;
     overlayRef.attach(this._getPortal());
@@ -293,6 +294,12 @@ export abstract class _MatMenuTriggerBase implements AfterContentInit, OnDestroy
 
     if (this.menu instanceof _MatMenuBase) {
       this.menu._startAnimation();
+      this.menu._directDescendantItems.changes.pipe(takeUntil(this.menu.close)).subscribe(() => {
+        // Re-adjust the position without locking when the amount of items
+        // changes so that the overlay is allowed to pick a new optimal position.
+        positionStrategy.withLockedPosition(false).reapplyLastPosition();
+        positionStrategy.withLockedPosition(true);
+      });
     }
   }
 
diff --git a/src/material/menu/menu.spec.ts b/src/material/menu/menu.spec.ts
index 1adb1fd42934..8cf46cdd46f1 100644
--- a/src/material/menu/menu.spec.ts
+++ b/src/material/menu/menu.spec.ts
@@ -11,7 +11,7 @@ import {
   TAB,
 } from '@angular/cdk/keycodes';
 import {Overlay, OverlayContainer} from '@angular/cdk/overlay';
-import {ScrollDispatcher} from '@angular/cdk/scrolling';
+import {ScrollDispatcher, ViewportRuler} from '@angular/cdk/scrolling';
 import {
   createKeyboardEvent,
   createMouseEvent,
@@ -57,6 +57,7 @@ import {MAT_MENU_SCROLL_STRATEGY, MENU_PANEL_TOP_PADDING} from './menu-trigger';
 describe('MatMenu', () => {
   let overlayContainerElement: HTMLElement;
   let focusMonitor: FocusMonitor;
+  let viewportRuler: ViewportRuler;
 
   function createComponent<T>(
     component: Type<T>,
@@ -71,6 +72,7 @@ describe('MatMenu', () => {
 
     overlayContainerElement = TestBed.inject(OverlayContainer).getContainerElement();
     focusMonitor = TestBed.inject(FocusMonitor);
+    viewportRuler = TestBed.inject(ViewportRuler);
     const fixture = TestBed.createComponent<T>(component);
     window.scroll(0, 0);
     return fixture;
@@ -1137,6 +1139,28 @@ describe('MatMenu', () => {
     expect(panel.classList).toContain('mat-menu-after');
   }));
 
+  it('should keep the panel in the viewport when more items are added while open', () => {
+    const fixture = createComponent(SimpleMenu, [], [FakeIcon]);
+    fixture.detectChanges();
+
+    const triggerEl = fixture.componentInstance.triggerEl.nativeElement;
+    triggerEl.style.position = 'absolute';
+    triggerEl.style.left = '200px';
+    triggerEl.style.bottom = '300px';
+    triggerEl.click();
+    fixture.detectChanges();
+
+    const panel = overlayContainerElement.querySelector('.mat-menu-panel')!;
+    const viewportHeight = viewportRuler.getViewportSize().height;
+    let panelRect = panel.getBoundingClientRect();
+    expect(Math.floor(panelRect.bottom)).toBeLessThan(viewportHeight);
+
+    fixture.componentInstance.extraItems = new Array(50).fill('Hello there');
+    fixture.detectChanges();
+    panelRect = panel.getBoundingClientRect();
+    expect(Math.floor(panelRect.bottom)).toBe(viewportHeight);
+  });
+
   describe('lazy rendering', () => {
     it('should be able to render the menu content lazily', fakeAsync(() => {
       const fixture = createComponent(SimpleLazyMenu);
diff --git a/src/material/menu/menu.ts b/src/material/menu/menu.ts
index 91fb0eff4c01..11e0518ad447 100644
--- a/src/material/menu/menu.ts
+++ b/src/material/menu/menu.ts
@@ -109,7 +109,7 @@ export class _MatMenuBase
   @ContentChildren(MatMenuItem, {descendants: true}) _allItems: QueryList<MatMenuItem>;
 
   /** Only the direct descendant menu items. */
-  private _directDescendantItems = new QueryList<MatMenuItem>();
+  _directDescendantItems = new QueryList<MatMenuItem>();
 
   /** Subscription to tab events on the menu panel */
   private _tabSubscription = Subscription.EMPTY;
diff --git a/tools/public_api_guard/material/menu.md b/tools/public_api_guard/material/menu.md
index da6acf65fbff..f7e52054035b 100644
--- a/tools/public_api_guard/material/menu.md
+++ b/tools/public_api_guard/material/menu.md
@@ -110,6 +110,7 @@ export class _MatMenuBase implements AfterContentInit, MatMenuPanel<MatMenuItem>
     // @deprecated
     readonly close: EventEmitter<MenuCloseReason>;
     readonly closed: EventEmitter<MenuCloseReason>;
+    _directDescendantItems: QueryList<MatMenuItem>;
     direction: Direction;
     // (undocumented)
     protected _elevationPrefix: string;
diff --git a/yarn.lock b/yarn.lock
index 143c3b05b3d4..8f5ca0d040c5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12954,7 +12954,7 @@ sass-lookup@^3.0.0:
   dependencies:
     commander "^2.16.0"
 
-sass@1.49.0, sass@^1.49.0:
+sass@1.49.0:
   version "1.49.0"
   resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.0.tgz#65ec1b1d9a6bc1bae8d2c9d4b392c13f5d32c078"
   integrity sha512-TVwVdNDj6p6b4QymJtNtRS2YtLJ/CqZriGg0eIAbAKMlN8Xy6kbv33FsEZSF7FufFFM705SQviHjjThfaQ4VNw==
@@ -12963,6 +12963,15 @@ sass@1.49.0, sass@^1.49.0:
     immutable "^4.0.0"
     source-map-js ">=0.6.2 <2.0.0"
 
+sass@^1.49.4:
+  version "1.49.4"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.4.tgz#d2655e03e52b2212ab65d392bdef6d0931d8637c"
+  integrity sha512-xUU5ZlppOjgfEyIIcHpnmY+f+3/ieaadp25S/OqZ5+jBPeTAMJJblkhM6UD9jb4j/lzglz7VOL5kglYt+CvNdQ==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 saucelabs@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/saucelabs/-/saucelabs-1.5.0.tgz#9405a73c360d449b232839919a86c396d379fd9d"