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:
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?