Hiding the First-Level Checkboxes in the TreeView

Environment

Description

How can I hide or remove the checkboxes in the first-level TreeView items?

Node Template-Based Solution

The nodeTemplateDirective allows you to add custom HTML or CSS to each tree node. You can add the checkboxes only to the desired nodes conditionally by using the *ngIf Angular directive.

The following example demonstrates how to add checkboxes to all but the top level nodes. The limitation of this approach is that the built-in features of a selectable TreeView will be lost and developers must manually handle the change checkbox event and the checked input property.

CSS-Based Solution

Hide the built-in checkboxes by using custom CSS that targets specific nodes.

The following example demonstrates how to hide the checkboxes in the top level nodes. This approach preserves the built-in features of the TreeView SelectDirective.