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 · Accepted Answer · 2019-10-02 16:55:12Z

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>

answered Oct 2, 2019 at 16:55

G. Tranter

18k3 gold badges52 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to render an angular component inside a material tree component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related