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

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,7 @@
  * 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 +17,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 +137,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];
 
@@ -1132,7 +1144,7 @@ class SimpleCdkTreeApp {
   indent: number | string = 28;
 
   @ViewChild(CdkTree, {static: false}) tree: CdkTree<TestData>;
-
+  @ViewChildren(CdkTreeNodePadding) paddingNodes: QueryList<CdkTreeNodePadding<TestData>>;
 }
 
 @Component({