refactor(material/button): clean up antipattern (#27157)

The button has a host binding that doesn't actually set the attribute it is bound to, but rather it is used to update the state of the ripple. This is an antipattern since data bindings aren't supposed to have side effects.

(cherry picked from commit 28e0ace)

Author: crisbeto

src/material/button/button-base.ts

@@ -14,6 +14,7 @@ import {
   ElementRef,
   inject,
   NgZone,
+  OnChanges,
   OnDestroy,
   OnInit,
 } from '@angular/core';
@@ -43,8 +44,6 @@ export const MAT_BUTTON_HOST = {
   // wants to target all Material buttons.
   '[class.mat-mdc-button-base]': 'true',
   [MAT_BUTTON_RIPPLE_UNINITIALIZED]: '',
-  '[attr.mat-button-disabled]': '_isRippleDisabled()',
-  '[attr.mat-button-is-fab]': '_isFab',
 };
 
 /** List of classes to add to buttons instances based on host attribute selector. */
@@ -95,7 +94,7 @@ export const _MatButtonMixin = mixinColor(
 @Directive()
 export class MatButtonBase
   extends _MatButtonMixin
-  implements CanDisable, CanColor, CanDisableRipple, AfterViewInit, OnDestroy
+  implements CanDisable, CanColor, CanDisableRipple, AfterViewInit, OnChanges, OnDestroy
 {
   private readonly _focusMonitor = inject(FocusMonitor);
 
@@ -151,6 +150,12 @@ export class MatButtonBase
     this._focusMonitor.monitor(this._elementRef, true);
   }
 
+  ngOnChanges() {
+    if (this._ripple) {
+      this._ripple.disabled = this.disableRipple || this.disabled;
+    }
+  }
+
   ngOnDestroy() {
     this._focusMonitor.stopMonitoring(this._elementRef);
   }
@@ -168,12 +173,6 @@ export class MatButtonBase
   private _hasHostAttributes(...attributes: string[]) {
     return attributes.some(attribute => this._elementRef.nativeElement.hasAttribute(attribute));
   }
-
-  _isRippleDisabled() {
-    if (this._ripple) {
-      this._ripple.disabled = this.disableRipple || this.disabled;
-    }
-  }
 }
 
 /** Shared inputs by buttons using the `<a>` tag */
@@ -197,8 +196,6 @@ export const MAT_ANCHOR_HOST = {
   // wants to target all Material buttons.
   '[class.mat-mdc-button-base]': 'true',
   [MAT_BUTTON_RIPPLE_UNINITIALIZED]: '',
-  '[attr.mat-button-disabled]': '_isRippleDisabled()',
-  '[attr.mat-button-is-fab]': '_isFab',
 };
 
 /**

tools/public_api_guard/material/button.md

@@ -18,6 +18,7 @@ import * as i4 from '@angular/material/core';
 import { InjectionToken } from '@angular/core';
 import { MatRipple } from '@angular/material/core';
 import { NgZone } from '@angular/core';
+import { OnChanges } from '@angular/core';
 import { OnDestroy } from '@angular/core';
 import { OnInit } from '@angular/core';
 import { Platform } from '@angular/cdk/platform';