如何在材质树组件内渲染 angular 组件

Question

I'm trying to use angular material tree combined with checkbox, but instead of using pure text to the side of the checkbox, I want to render my own angular component.

upon selection the model of that component should be emitted.

I've tried to use the following as a reference: https://stackblitz.com/angular/poxkygvnbyd?file=app%2Ftree-checklist-example.ts

And also tried reading the angular material tree API: https://material.angular.io/components/tree/api

Still not sure how it can be done.

Answer 1

Use template logic to conditionally display the custom component inside the checkbox element:

<mat-checkbox #cb class="checklist-leaf-node"
    [checked]="checklistSelection.isSelected(node)"
    (change)="checklistSelection.toggle(node);">
  <my-special-component *ngIf="cb.checked; else notChecked"></my-special-component>
  <ng-template #notChecked>{{node.item}}</ng-template>
</mat-checkbox>