Положение индикатора в матовом дереве Angular

Question

Я хочу изменить положение индикатора. Я не нашел ничего в документации об этом. Вот stackblitz из угловых материалов документов. Я хочу иметь индикатор на правой стороне заголовка, на каждом уровне дерева. Спасибо за помощь:)

Answer 1

Вы можете добавить label сначала, затем button внутри вашего HTML file, как показано ниже.

 <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
   {{node.name}}
   <button mat-icon-button matTreeNodeToggle
        [attr.aria-label]="'toggle ' + node.name">
   <mat-icon class="mat-icon-rtl-mirror">
      {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
    </mat-icon>
  </button>

Я обновил ваш код здесь, в stackblitz.

Answer 2

Просто измените положение метки перед кнопкой

{{node.name}}
<button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
  <mat-icon class="mat-icon-rtl-mirror">
    {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
  </mat-icon>
</button>