How to make it multi part select filtering angular

Question

HTML

 <nz-dropdown class="filter-dropdown" [nzTrigger]="'click'" nzPlacement="bottomRight">
              <a nz-dropdown nz-tooltip nzTitle="Feature not functional">
                {{ activeFilter.filterBy }} <i nz-icon [type]="activeFilter.order === 'ASC' ? 'up' : 'down'"></i>
              </a>
              <ul nz-menu>
                <li class="filter-dropdown-item" nz-menu-item  (click)="handleFilter('filterBy', 'Application')">Application</li>
                <li class="filter-dropdown-item" nz-menu-item  (click)="handleFilter('filterBy', 'Date')">
                  Date
                  <i nz-icon nzType="check" nzTheme="outline"></i>
                </li>
                <li nz-menu-divider></li>
                <li class="filter-dropdown-item" nz-menu-item  (click)="handleFilter('status', 'ALL')">All</li>
                <li class="filter-dropdown-item" nz-menu-item  (click)="handleFilter('status', 'ACK')">Acknowledged</li>
                <li class="filter-dropdown-item" nz-menu-item  (click)="handleFilter('status', 'READ')">Read</li>
                <li class="filter-dropdown-item" nz-menu-item  (click)="handleFilter('status', 'NEW')">New</li>
                <li nz-menu-divider></li>
                <li class="filter-dropdown-item" nz-menu-item  (click)="handleFilter('order', 'ASC')">Ascending</li>
                <li class="filter-dropdown-item" nz-menu-item  (click)="handleFilter('order', 'DESC')">Descending</li>
                <li nz-menu-divider></li>
                <li class="filter-dropdown-item" nz-menu-item  (click)="handleFilter('grouped', true)">Grouped</li>
                <li class="filter-dropdown-item" nz-menu-item  (click)="handleFilter('grouped', false)">Ungrouped</li>
              </ul>
            </nz-dropdown>

TS

 activeFilter = {
    filterBy: 'Date',
    length: 100,
    status: 'ALL',
    order: 'ASC',
    grouped: false
  };

handleFilter(targetFilter?: string, value?: any) {
    this.activeFilter[targetFilter] = value;

    console.log(this.activeFilter);
    if (targetFilter === 'order') {
      // ?direction = 'asc' || 'desc']
    }
  }

How to make it multi part selection filtering? here's the example of list: https://i.sstatic.net/QJKAg.png

when selecting the dropdown there should be default which is the Date->All->Ascending->Ungrouped

which it should be like this https://i.sstatic.net/GyEv1.png

Answer 1

I modified code in below link

https://stackblitz.com/edit/angular-6zvbjl-uoffds

I added conditional icon for each filter element

 <i nz-icon nzType="check" *ngIf="activeFilter.filterBy=='Application'" nzTheme="outline"></i>

and in your button for status I wrote function because it has more than two option. For anothers, I put condition in html

<a nz-dropdown nz-tooltip nzTitle="Feature not functional">
        {{ activeFilter.filterBy }} ->  {{ statuName(activeFilter.status) }} ->  {{ activeFilter.order=="ASC" ? "Ascending" : "Descending" }} ->  
        {{ activeFilter.grouped? "Groupped" : "Ungrouped" }}
      </a>

 statuName(param){
    if(param=="ALL"){return "All"}
    else if(param=="ACK"){return "Acknowledged"}
    else if(param=="READ"){return "Read"}
    else if(param=="NEW"){return "New"}
  }

and for your divider I put css code with class name

.divider {
          height: 11px !important;
          margin: 4px 0;
          overflow: hidden;
          line-height: 0;
          background-color: #e8e8e887;
      }