[SOLVED] NG-ZORRO Tree component with dropdowns instead of checkboxes?

NG-ZORRO Tree component with dropdowns instead of checkboxes?

I'm trying to create a tree using a tree component from ng-zorro but instead of checkboxes for the leaves I want to have dropdowns. I tried using the ng-template but the checkbox is still rendered. This is my code:

Tree object:

export let objectModel2: NzTreeNodeOptions[] = 
[
    {
        title: 'Test',
        key: '1',
        children: [
          {
            title: 'T1',
            key: '1.1',
            isLeaf: true      
          },
          {
            title: 'T2',
            key: '1.2',
            isLeaf: true
          }
        ]
    },
]

HTML:

<nz-tabset nzType="card">
        <nz-tree  nzCheckable [nzData]="objectModel2">
            <ng-template  #nzTreeTemplate let-node>
                
              <ng-container *ngIf="node.isLeaf">                          
                    <nz-select  nzMode="multiple" [(ngModel)]="listOfSelectedValue">
                    </nz-select>
              </ng-container>
              <ng-container *ngIf="!node.isLeaf">
                <nz-checkbox [(ngModel)]="node.checked">{{ node.title }}</nz-checkbox>
              </ng-container>
  
            </ng-template>
        </nz-tree>
</nz-tabset>

Component:

import { Component, ViewChild } from '@angular/core';
import { NzTreeComponent } from 'ng-zorro-antd/tree';
import { objectModel, objectModel2 } from './select-informations-request.metadata';

@Component({
  selector: 'tree',
  templateUrl: './tree.component.html'
})
export class SelectInformationsRequestComponent
{
  objectModel2: any = objectModel2;

  @ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent;

  listOfSelectedValue = ['1', '2'];
}

Solution

You need to remove nzCheckable from nz-tree.

Here is a working snippet, slightly modified:

  <nz-tree [nzData]="objectModel2">
    <ng-template #nzTreeTemplate let-node>
      <ng-container *ngIf="node.isLeaf">
        <nz-select style="width: 200px" nzMode="multiple" [(ngModel)]="listOfSelectedValue">
          <nz-option nzValue="1" nzLabel="1"></nz-option>
        </nz-select>
      </ng-container>
      <ng-container *ngIf="!node.isLeaf">
        <nz-checkbox [(ngModel)]="node.checked">{{ node.title }}</nz-checkbox>
      </ng-container>
    </ng-template>
  </nz-tree>

And since you are no longer using the checkbox, you can replace

<nz-checkbox [(ngModel)]="node.checked">{{ node.title }}</nz-checkbox>

with

<span>{{ node.title }}</span>