fix(tree): unable to set zero as the padding of a tree node (#16345)

Fixes setting zero as the padding of a tree node being ignored by the `CkdTreeNodePadding` directive.

Fixes #16338.

Author: crisbeto

src/cdk/tree/padding.ts

@@ -37,7 +37,10 @@ export class CdkTreeNodePadding<T> implements OnDestroy {
   @Input('cdkTreeNodePadding')
   get level(): number { return this._level; }
   set level(value: number) {
-    this._level = coerceNumberProperty(value);
+    // Set to null as the fallback value so that _setPadding can fall back to the node level if the
+    // consumer set the directive as `cdkTreeNodePadding=""`. We still want to take this value if
+    // they set 0 explicitly.
+    this._level = coerceNumberProperty(value, null)!;
     this._setPadding();
   }
   _level: number;
@@ -90,8 +93,8 @@ export class CdkTreeNodePadding<T> implements OnDestroy {
     const nodeLevel = (this._treeNode.data && this._tree.treeControl.getLevel)
       ? this._tree.treeControl.getLevel(this._treeNode.data)
       : null;
-    const level = this._level || nodeLevel;
-    return level ? `${level * this._indent}${this.indentUnits}` : null;
+    const level = this._level == null ? nodeLevel : this._level;
+    return typeof level === 'number' ? `${level * this._indent}${this.indentUnits}` : null;
   }
 
   _setPadding(forceChange = false) {

src/cdk/tree/tree.spec.ts

@@ -6,7 +6,15 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {ComponentFixture, TestBed, fakeAsync, flush} from '@angular/core/testing';
-import {Component, ViewChild, TrackByFunction, Type, EventEmitter} from '@angular/core';
+import {
+  Component,
+  ViewChild,
+  TrackByFunction,
+  Type,
+  EventEmitter,
+  ViewChildren,
+  QueryList,
+} from '@angular/core';
 
 import {CollectionViewer, DataSource} from '@angular/cdk/collections';
 import {Directionality, Direction} from '@angular/cdk/bidi';
@@ -17,7 +25,7 @@ import {BaseTreeControl} from './control/base-tree-control';
 import {TreeControl} from './control/tree-control';
 import {FlatTreeControl} from './control/flat-tree-control';
 import {NestedTreeControl} from './control/nested-tree-control';
-import {CdkTreeModule} from './index';
+import {CdkTreeModule, CdkTreeNodePadding} from './index';
 import {CdkTree, CdkTreeNode} from './tree';
 import {getTreeControlFunctionsMissingError} from './tree-errors';
 
@@ -137,6 +145,18 @@ describe('CdkTree', () => {
           [`${data[2].pizzaTopping} - ${data[2].pizzaCheese} + ${data[2].pizzaBase}`]);
       });
 
+      it('should be able to set zero as the indent level', () => {
+        component.paddingNodes.forEach(node => node.level = 0);
+        fixture.detectChanges();
+
+        const data = dataSource.data;
+
+        expectFlatTreeToMatch(treeElement, 0, 'px',
+          [`${data[0].pizzaTopping} - ${data[0].pizzaCheese} + ${data[0].pizzaBase}`],
+          [`${data[1].pizzaTopping} - ${data[1].pizzaCheese} + ${data[1].pizzaBase}`],
+          [`${data[2].pizzaTopping} - ${data[2].pizzaCheese} + ${data[2].pizzaBase}`]);
+      });
+
       it('should reset the opposite direction padding if the direction changes', () => {
         const node = getNodes(treeElement)[0];
 
@@ -1046,7 +1066,10 @@ function expectFlatTreeToMatch(treeElement: Element,
   }
 
   function checkLevel(node: Element, expectedNode: any[]) {
-    const actualLevel = (node as HTMLElement).style.paddingLeft;
+    const rawLevel = (node as HTMLElement).style.paddingLeft;
+
+    // Some browsers return 0, while others return 0px.
+    const actualLevel = rawLevel === '0' ? '0px' : rawLevel;
     const expectedLevel = `${(expectedNode.length) * expectedPaddingIndent}${expectedPaddingUnits}`;
     if (actualLevel != expectedLevel) {
       missedExpectations.push(
@@ -1132,7 +1155,7 @@ class SimpleCdkTreeApp {
   indent: number | string = 28;
 
   @ViewChild(CdkTree, {static: false}) tree: CdkTree<TestData>;
-
+  @ViewChildren(CdkTreeNodePadding) paddingNodes: QueryList<CdkTreeNodePadding<TestData>>;
 }
 
 @Component({

src/material/tree/tree.spec.ts

@@ -539,12 +539,14 @@ function expectFlatTreeToMatch(treeElement: Element, expectedPaddingIndent: numb
   }
 
   function checkLevel(node: Element, expectedNode: any[]) {
+    const rawLevel = (node as HTMLElement).style.paddingLeft;
 
-    const actualLevel = (node as HTMLElement).style.paddingLeft;
+    // Some browsers return 0, while others return 0px.
+    const actualLevel = rawLevel === '0' ? '0px' : rawLevel;
     if (expectedNode.length === 1) {
-      if (actualLevel !== ``) {
+      if (actualLevel !== `` && actualLevel !== '0px') {
         missedExpectations.push(
-          `Expected node level to be 0 but was ${actualLevel}`);
+          `Expected node level to be 0px but was ${actualLevel}`);
       }
     } else {
       const expectedLevel = `${(expectedNode.length - 1) * expectedPaddingIndent}px`;