mardi 9 juin 2020

Angular mat-checkbox that is selected on load, then behaviors follow functions

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