fix(slider): displayWith function never called with "null" (#16707)

Currently the "displayWith" function for a `MatSlider` is typed
in a way that implies that the function is sometimes called with
null as value. This is never the case because the `value` property
of the slider always returns a number but is just typed as `null`-able
because getters and setters cannot have different types.

This fixes the type for the `displayWith` function as it will never be
called with `null`.

Author: devversion

src/material-examples/material/slider/slider-formatting/slider-formatting-example.ts

@@ -9,11 +9,7 @@ import {Component} from '@angular/core';
   styleUrls: ['slider-formatting-example.css'],
 })
 export class SliderFormattingExample {
-  formatLabel(value: number | null) {
-    if (!value) {
-      return 0;
-    }
-
+  formatLabel(value: number) {
     if (value >= 1000) {
       return Math.round(value / 1000) + 'k';
     }

src/material/slider/slider.spec.ts

@@ -1531,11 +1531,7 @@ class SliderWithThumbLabel { }
   styles: [styles],
 })
 class SliderWithCustomThumbLabelFormatting {
-  displayWith(value: number | null) {
-    if (!value) {
-      return 0;
-    }
-
+  displayWith(value: number) {
     if (value >= 1000) {
       return (value / 1000) + 'k';
     }

src/material/slider/slider.ts

@@ -261,7 +261,7 @@ export class MatSlider extends _MatSliderMixinBase
    * in the thumb label. Can be used to format very large number in order
    * for them to fit into the slider thumb.
    */
-  @Input() displayWith: (value: number | null) => string | number;
+  @Input() displayWith: (value: number) => string | number;
 
   /** Whether the slider is vertical. */
   @Input()
@@ -287,7 +287,9 @@ export class MatSlider extends _MatSliderMixinBase
   /** The value to be used for display purposes. */
   get displayValue(): string | number {
     if (this.displayWith) {
-      return this.displayWith(this.value);
+      // Value is never null but since setters and getters cannot have
+      // different types, the value getter is also typed to return null.
+      return this.displayWith(this.value!);
     }
 
     // Note that this could be improved further by rounding something like 0.999 to 1 or

tools/public_api_guard/material/slider.d.ts

@@ -24,7 +24,7 @@ export declare class MatSlider extends _MatSliderMixinBase implements ControlVal
     };
     readonly change: EventEmitter<MatSliderChange>;
     readonly displayValue: string | number;
-    displayWith: (value: number | null) => string | number;
+    displayWith: (value: number) => string | number;
     readonly input: EventEmitter<MatSliderChange>;
     invert: boolean;
     max: number;