refactor(material/button): simplify host bindings (#30630)

Following up on #30626 (comment), these changes move the button's shared host bindings into the base class and turn some classes that are added manually into host bindings.

The previous approach was only necessary with ViewEngine, because it wasn't doing inheritance of host bindings correctly and wasn't merging classes. These are no longer issues in Ivy.

Finally, these changes allow us to take advantage of an upcoming framework feature: angular/angular#60267

Author: crisbeto

src/material/button/button-base.ts

@@ -45,34 +45,30 @@ export interface MatButtonConfig {
 /** Injection token that can be used to provide the default options the button component. */
 export const MAT_BUTTON_CONFIG = new InjectionToken<MatButtonConfig>('MAT_BUTTON_CONFIG');
 
-/** Shared host configuration for all buttons */
-export const MAT_BUTTON_HOST = {
-  '[attr.disabled]': '_getDisabledAttribute()',
-  '[attr.aria-disabled]': '_getAriaDisabled()',
-  '[class.mat-mdc-button-disabled]': 'disabled',
-  '[class.mat-mdc-button-disabled-interactive]': 'disabledInteractive',
-  '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
-  // MDC automatically applies the primary theme color to the button, but we want to support
-  // an unthemed version. If color is undefined, apply a CSS class that makes it easy to
-  // select and style this "theme".
-  '[class.mat-unthemed]': '!color',
-  // Add a class that applies to all buttons. This makes it easier to target if somebody
-  // wants to target all Material buttons.
-  '[class.mat-mdc-button-base]': 'true',
-  '[class]': 'color ? "mat-" + color : ""',
-  '[attr.tabindex]': '_getTabIndex()',
-};
-
 function transformTabIndex(value: unknown): number | undefined {
   return value == null ? undefined : numberAttribute(value);
 }
 
-/** Base class for all buttons.  */
-@Directive()
+/** Base class for all buttons. */
+@Directive({
+  host: {
+    // Add a class that applies to all buttons. This makes it easier to target if somebody
+    // wants to target all Material buttons.
+    'class': 'mat-mdc-button-base',
+    '[class]': 'color ? "mat-" + color : ""',
+    '[attr.disabled]': '_getDisabledAttribute()',
+    '[attr.aria-disabled]': '_getAriaDisabled()',
+    '[attr.tabindex]': '_getTabIndex()',
+    '[class.mat-mdc-button-disabled]': 'disabled',
+    '[class.mat-mdc-button-disabled-interactive]': 'disabledInteractive',
+    '[class.mat-unthemed]': '!color',
+    '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
+  },
+})
 export class MatButtonBase implements AfterViewInit, OnDestroy {
   _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
-  _ngZone = inject(NgZone);
-  _animationMode = inject(ANIMATION_MODULE_TYPE, {optional: true});
+  protected _ngZone = inject(NgZone);
+  protected _animationMode = inject(ANIMATION_MODULE_TYPE, {optional: true});
 
   protected readonly _config = inject(MAT_BUTTON_CONFIG, {optional: true});
   private readonly _focusMonitor = inject(FocusMonitor);

src/material/button/button.ts

@@ -7,7 +7,7 @@
  */
 
 import {ChangeDetectionStrategy, Component, Input, ViewEncapsulation} from '@angular/core';
-import {MAT_BUTTON_HOST, MatButtonAppearance, MatButtonBase} from './button-base';
+import {MatButtonAppearance, MatButtonBase} from './button-base';
 
 /**
  * Classes that need to be set for each appearance of the button.
@@ -32,7 +32,9 @@ const APPEARANCE_CLASSES: Map<MatButtonAppearance, readonly string[]> = new Map(
   `,
   templateUrl: 'button.html',
   styleUrls: ['button.css', 'button-high-contrast.css'],
-  host: MAT_BUTTON_HOST,
+  host: {
+    'class': 'mdc-button',
+  },
   exportAs: 'matButton, matAnchor',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -54,11 +56,7 @@ export class MatButton extends MatButtonBase {
 
   constructor() {
     super();
-    const element = this._elementRef.nativeElement;
-    const inferredAppearance = _inferAppearance(element);
-
-    // This class is common across all the appearances so we add it ahead of time.
-    element.classList.add('mdc-button');
+    const inferredAppearance = _inferAppearance(this._elementRef.nativeElement);
 
     // Only set the appearance if we managed to infer it from the static attributes, rather than
     // doing something like `setAppearance(inferredAppearance || 'text')`, because doing so can

src/material/button/fab.ts

@@ -16,7 +16,7 @@ import {
   inject,
 } from '@angular/core';
 
-import {MAT_BUTTON_HOST, MatButtonBase} from './button-base';
+import {MatButtonBase} from './button-base';
 import {ThemePalette} from '../core';
 
 /** Default FAB options that can be overridden. */
@@ -67,7 +67,7 @@ const defaults = MAT_FAB_DEFAULT_OPTIONS_FACTORY();
   templateUrl: 'button.html',
   styleUrl: 'fab.css',
   host: {
-    ...MAT_BUTTON_HOST,
+    'class': 'mdc-fab mat-mdc-fab-base mat-mdc-fab',
     '[class.mdc-fab--extended]': 'extended',
     '[class.mat-mdc-extended-fab]': 'extended',
   },
@@ -86,8 +86,6 @@ export class MatFabButton extends MatButtonBase {
 
   constructor() {
     super();
-    const element = this._elementRef.nativeElement;
-    element.classList.add('mdc-fab', 'mat-mdc-fab-base', 'mat-mdc-fab');
     this._options = this._options || defaults;
     this.color = this._options!.color || defaults.color;
   }
@@ -102,7 +100,9 @@ export class MatFabButton extends MatButtonBase {
   selector: `button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]`,
   templateUrl: 'button.html',
   styleUrl: 'fab.css',
-  host: MAT_BUTTON_HOST,
+  host: {
+    'class': 'mdc-fab mat-mdc-fab-base mdc-fab--mini mat-mdc-mini-fab',
+  },
   exportAs: 'matButton, matAnchor',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -116,8 +116,6 @@ export class MatMiniFabButton extends MatButtonBase {
 
   constructor() {
     super();
-    const element = this._elementRef.nativeElement;
-    element.classList.add('mdc-fab', 'mat-mdc-fab-base', 'mdc-fab--mini', 'mat-mdc-mini-fab');
     this._options = this._options || defaults;
     this.color = this._options!.color || defaults.color;
   }

src/material/button/icon-button.ts

@@ -7,7 +7,7 @@
  */
 
 import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
-import {MAT_BUTTON_HOST, MatButtonBase} from './button-base';
+import {MatButtonBase} from './button-base';
 
 /**
  * Material Design icon button component. This type of button displays a single interactive icon for
@@ -18,7 +18,9 @@ import {MAT_BUTTON_HOST, MatButtonBase} from './button-base';
   selector: `button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]`,
   templateUrl: 'icon-button.html',
   styleUrls: ['icon-button.css', 'button-high-contrast.css'],
-  host: MAT_BUTTON_HOST,
+  host: {
+    'class': 'mdc-icon-button mat-mdc-icon-button',
+  },
   exportAs: 'matButton, matAnchor',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -28,9 +30,7 @@ export class MatIconButton extends MatButtonBase {
 
   constructor() {
     super();
-    const element = this._elementRef.nativeElement;
-    element.classList.add('mdc-icon-button', 'mat-mdc-icon-button');
-    this._rippleLoader.configureRipple(element, {centered: true});
+    this._rippleLoader.configureRipple(this._elementRef.nativeElement, {centered: true});
   }
 }
 

tslint.json

@@ -111,13 +111,6 @@
           }
         ],
         "Directive": [
-          {
-            "argument": 0,
-            "properties": {
-              "!host": "\\[class\\]"
-            },
-            "excludeFiles": ["**/dev-app/**"]
-          },
           // Enforce standalone even in the dev-app.
           {
             "argument": 0,