How to render an angular component inside a material tree component

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.

G. Tranter G. Tranter · Accepted Answer · 2019-10-02T16:55:12

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>

How to render an angular component inside a material tree component

1 Answers