Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Calculator

0

195
Views
mat-checkbox in mat-tree not rendering properly

I am working on a new Word add-in using the JS API. I'm trying to put together a tree with checkboxes in one of the panes, but the checkboxes are looking weird: enter image description here

as you can see there are two sets of boxes, and when I check one of them there's a double check mark. I'm not sure why this is as I followed the instructions here: https://material.angular.io/components/tree/examples

This is what my html looks like:

<mat-tree [dataSource]="dataTree" [treeControl]="treeControl" multiTemplateDataRows> 
    <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
        <button
          mat-icon-button
          matTreeNodeToggle
          [attr.aria-label]="'Toggle ' + node.item"
        >
          <mat-icon class="mat-icon-rtl-mirror">
            {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
          </mat-icon>
        </button>
        <mat-checkbox
          [checked]="test(node)"
          [indeterminate]="test(node)"
          (change)="test(node)"
          >{{node.name}}</mat-checkbox
        >
      </mat-tree-node>
</mat-tree>

I have this reference to the material stylesheet in my index.html:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

And lastly I have the following imports:

import { MatTreeModule } from "@angular/material/tree";
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';

Any idea why its rendering so weird? Also you will notice a grey area around the "chevron" icon. In the sample I found online it seems that the circle only appears when you click on the chevron icon to expand, but in practice it seems to always be there.

Is this a limitation of the Word API?

7 months ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2023 PeakU Inc. All Rights Reserved.