fix(material/tabs): allow coercing of booleans for all inputs (#24377)

Previously, some properties were declared as BooleanInput and some not. With this commit, all boolean inputs are threat as BooleanInput and therefore the input values are being coerced.

Author: jeripeierSBB

src/components-examples/material/tabs/tab-group-preserve-content/tab-group-preserve-content-example.html

@@ -1,6 +1,6 @@
 <p>Start the video in the first tab and navigate to the second one to see how it keeps playing.</p>
 
-<mat-tab-group [preserveContent]="true">
+<mat-tab-group preserveContent>
   <mat-tab label="First">
     <iframe
       width="560"

src/material/tabs/paginated-tab-header.ts

@@ -22,7 +22,12 @@ import {
   Input,
 } from '@angular/core';
 import {Direction, Directionality} from '@angular/cdk/bidi';
-import {coerceNumberProperty, NumberInput} from '@angular/cdk/coercion';
+import {
+  BooleanInput,
+  coerceBooleanProperty,
+  coerceNumberProperty,
+  NumberInput,
+} from '@angular/cdk/coercion';
 import {ViewportRuler} from '@angular/cdk/scrolling';
 import {FocusKeyManager, FocusableOption} from '@angular/cdk/a11y';
 import {ENTER, SPACE, hasModifierKey} from '@angular/cdk/keycodes';
@@ -121,7 +126,13 @@ export abstract class MatPaginatedTabHeader
    * layout recalculations if it's known that pagination won't be required.
    */
   @Input()
-  disablePagination: boolean = false;
+  get disablePagination(): boolean {
+    return this._disablePagination;
+  }
+  set disablePagination(value: BooleanInput) {
+    this._disablePagination = coerceBooleanProperty(value);
+  }
+  private _disablePagination: boolean = false;
 
   /** The index of the active tab. */
   get selectedIndex(): number {

src/material/tabs/tab-group.ts

@@ -116,7 +116,7 @@ export abstract class _MatTabGroupBase
   set dynamicHeight(value: BooleanInput) {
     this._dynamicHeight = coerceBooleanProperty(value);
   }
-  private _dynamicHeight: boolean;
+  private _dynamicHeight: boolean = false;
 
   /** The index of the active tab. */
   @Input()
@@ -161,15 +161,27 @@ export abstract class _MatTabGroupBase
    * layout recalculations if it's known that pagination won't be required.
    */
   @Input()
-  disablePagination: boolean;
+  get disablePagination(): boolean {
+    return this._disablePagination;
+  }
+  set disablePagination(value: BooleanInput) {
+    this._disablePagination = coerceBooleanProperty(value);
+  }
+  private _disablePagination: boolean = false;
 
   /**
    * By default tabs remove their content from the DOM while it's off-screen.
    * Setting this to `true` will keep it in the DOM which will prevent elements
    * like iframes and videos from reloading next time it comes back into the view.
    */
   @Input()
-  preserveContent: boolean;
+  get preserveContent(): boolean {
+    return this._preserveContent;
+  }
+  set preserveContent(value: BooleanInput) {
+    this._preserveContent = coerceBooleanProperty(value);
+  }
+  private _preserveContent: boolean = false;
 
   /** Background color of the tab group. */
   @Input()

tools/public_api_guard/material/tabs.md

@@ -233,7 +233,8 @@ export abstract class _MatTabGroupBase extends _MatTabGroupMixinBase implements
     protected _changeDetectorRef: ChangeDetectorRef;
     get contentTabIndex(): number | null;
     set contentTabIndex(value: NumberInput);
-    disablePagination: boolean;
+    get disablePagination(): boolean;
+    set disablePagination(value: BooleanInput);
     get dynamicHeight(): boolean;
     set dynamicHeight(value: BooleanInput);
     readonly focusChange: EventEmitter<MatTabChangeEvent>;
@@ -250,7 +251,8 @@ export abstract class _MatTabGroupBase extends _MatTabGroupMixinBase implements
     ngAfterContentInit(): void;
     // (undocumented)
     ngOnDestroy(): void;
-    preserveContent: boolean;
+    get preserveContent(): boolean;
+    set preserveContent(value: BooleanInput);
     realignInkBar(): void;
     _removeTabBodyWrapperHeight(): void;
     get selectedIndex(): number | null;