this.nzDropdownMenu.descendantMenuItemClick$ is undefined

Reproduction link

Demo

Steps to reproduce

I am trying to make custom filter in my table but i’m unable to open dropdown, it return error of

ERROR TypeError: this.nzDropdownMenu.descendantMenuItemClick$ is undefined

What is expected?

Open each table heading dropfown

What is actually happening?

get error

Environment	Info
ng-zorro-antd	10.1.2
Browser	Firefox

---

Code

<th *ngFor="let column of listOfColumns; let i = index;">
                {{ column.name }}
                <nz-filter-trigger [(nzVisible)]="visible" [nzActive]="searchValue.length > 0" [nzDropdownMenu]="'menu' +  i">
                  <i nz-icon nzType="caret-down"></i>
                </nz-filter-trigger>
                <!-- filter fields -->
                <nz-dropdown-menu #menu{{i}}="nzDropdownMenu">
                    <div class="search-box p-2" *ngIf="visible">
                      <div class="mb-2">
                        <label for="">Search By {{ column.name }}</label> <br>
                        <input nz-input placeholder="Type here..." />
                      </div>

                      <div class="mb-2">
                        <label for="sort">Sort Order</label> <br>
                        <nz-select ngModel="none" class="text-left mr-2" style="width:100%;">
                            <nz-option nzValue="none" nzLabel="None"></nz-option>
                            <nz-option nzValue="asc" nzLabel="Ascending"></nz-option>
                            <nz-option nzValue="desc" nzLabel="Descending"></nz-option>
                        </nz-select>
                      </div>

                      <div class="mb-2">
                        <label for="op">Filter Column</label> <br>
                        <nz-select ngModel="contains" class="text-left mr-2" style="width:100%;">
                            <nz-option nzValue="contains" nzLabel="Contains"></nz-option>
                            <nz-option nzValue="like" nzLabel="Like"></nz-option>
                        </nz-select>
                      </div>
                      <button type="button" class="btn btn-warning w-100 mt-2" (click)="search()"><i class="fe fe-search"></i> Search</button>
                    </div>
                </nz-dropdown-menu>
                <!-- filter fields -->
</th>

Note If I use [nzDropdownMenu]="menu" and #menu="nzDropdownMenu" (as of documents) it will open all headers dropdown at the same time but since I’ve added index number to have unique ids it returns this error (mentioned above).

any idea?

[to0simple]

@to0simple

<th *ngFor="let column of listOfColumns; let i = index;">
  {{ column.name }}
  <nz-filter-trigger [nzActive]="searchValue.length > 0" [nzDropdownMenu]="'menu' + i">
    <i nz-icon nzType="caret-down"></i>
  </nz-filter-trigger>
 
  <!-- filter fields -->
  <nz-dropdown-menu #menu{{i}}="nzDropdownMenu">
  ..... rest of it...

Also as your sample <nz-dropdown-menu #menu{{i}}> none of them work 😞 did I miss something from your sample?!

<th *ngFor="let column of listOfColumns; let i = index;">
  {{ column.name }}
  <nz-filter-trigger [nzActive]="searchValue.length > 0" [nzDropdownMenu]="menu">
    <i nz-icon nzType="caret-down"></i>
  </nz-filter-trigger>
 
  <!-- filter fields -->
  <nz-dropdown-menu #menu="nzDropdownMenu">
  ..... rest of it...

u can try this way . remove i

[robertnicjoo]

@to0simple Thanks man it worked eventually ❤️