bug(MatTreeModule): Tree with checkboxes example - Reversed checkbox selected values when node has no child

[NourasHamwi]

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/fork/components-issue

Steps to reproduce:

1. Open Tree with checkboxes on StackBlitz https://stackblitz.com/angular/krgkldbxvgb?file=src%2Fapp%2Ftree-checklist-example.ts
2. Add example: {} to const TREE_DATA

Expected Behavior

What behavior were you expecting to see?

The added node this.checklistSelection should be selected when the node is selected and should show not selected when the node is not selected.

Actual Behavior

What behavior did you actually see?

For the added node the selection values are reversed.

Environment

• Angular: 10
• CDK/Material: 10
• Browser(s): chrome
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[crisbeto]

It looks like we use Array.prototype.every for check if all tree nodes are selected, but every also returns true if the array is empty.

[walvekarnikhil]

In this case, expandable is also set to true, which makes the node as a non-leaf node.

Since there are no children, we should not show an expandable icon there.

We also need to fix transformer function to check for children.length before setting expandable property.