I have a nested tree node that contains check boxes that follow the normal behavior of having a check when all selected, a line when indeterminate, and empty when all unchecked. However, I'd like the boxes to all start off checked. I have tried using ng-init
as well as onload
and haven't figured out the right way to do this without disrupting the other behaviors. I'm sure it's something simple that I just can't seem to find while googling. I'm pretty new to html and angular. Please let me know if I've left out any information.
Thanks!
component.html
<mat-expansion-panel>
<mat-expansion-panel-header>Scene</mat-expansion-panel-header>
<mat-tree [dataSource]="sceneTreeService.sceneTreeDataSource" [treeControl]="sceneTreeService.treeControl" *ngIf="sceneTreeService.layerNodes">
<mat-nested-tree-node *matTreeNodeDef="let node; when: sceneTreeService.hasChild">
<div class="mat-tree-node">
<div mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
<mat-icon *ngIf="node.children && node.type !== LayerType.Photospheres" class="mat-icon-rtl-mirror">
</mat-icon>
<mat-checkbox *ngIf="!node.children && node.type !== LayerType.Photospheres"
[checked]="sceneTreeService.checklistSelection.isSelected(node)"
(change)="sceneTreeService.checklistSelection.toggle(node);renderService.showLayerItem(node.uuid, node.type, $event.checked, node.name, node.fileId)"></mat-checkbox>
<mat-checkbox *ngIf="node.children || node.type === LayerType.Photospheres"
[checked]="sceneTreeService.descendantsAllSelected(node)"
[indeterminate]="sceneTreeService.partiallySelected(node)"
(change)="sceneTreeService.itemSelectionToggle(node);renderService.showLayer(node.type, $event.checked)"></mat-checkbox>
<mat-slider *ngIf="!node.children && node.type !== LayerType.Tools && node.type !== LayerType.Photospheres" class="slider-margin" [max]="1.0" [min]="0.0" [step]="0.01" [(value)]="node.opacity"
(input)="renderService.changeLayerItemOpacity(node.uuid, node.type, $event.value, node.name, node.fileId)"></mat-slider>
<mat-slider *ngIf="node.children && node.type !== LayerType.Tools && node.type !== LayerType.Photospheres" class="slider-margin" [max]="1.0" [min]="0.0" [step]="0.01" [(value)]="node.opacity"
(input)="renderService.changeLayerOpacity(node.type, $event.value)"></mat-slider>
</div>
</div>
<ul [class.tree-invisible]="!sceneTreeService.treeControl.isExpanded(node) || node.type === LayerType.Photospheres">
<ng-container matTreeNodeOutlet></ng-container>
</ul>
</mat-nested-tree-node>
</mat-tree>
scene-tree.service.ts
descendantsAllSelected(node: LayerNode): boolean {
const descendants = this.treeControl.getDescendants(node);
return descendants.every(child => this.checklistSelection.isSelected(child));
}
partiallySelected(node: LayerNode): boolean {
const descendants = this.treeControl.getDescendants(node);
const result = descendants.some(child => this.checklistSelection.isSelected(child))
return result && !this.descendantsAllSelected(node);
}
itemSelectionToggle(node: LayerNode): void {
this.checklistSelection.toggle(node);
const descendants = this.treeControl.getDescendants(node);
this.checklistSelection.isSelected(node)
? this.checklistSelection.select(...descendants)
: this.checklistSelection.deselect(...descendants);
}
Aucun commentaire:
Enregistrer un commentaire