ng-select with ? icon on end of each option item, clicking the ? icon prevent the closing and show a modal

[nizalsha]

I am using ng-select for showing select list and hovering on each options shows tooltip with a description of that option instead of this i want ? icon on the end of each option and when i click the ? icon the select shouldnot close and a modal has to be opened.

here is my ng-select input

<div class="form-floating mb-3"> <ng-select [items]="groupData" name="department" bindLabel="name" bindValue="value" [(ngModel)]="department" (change)="showLanes()" placeholder="Select {{labelDepartment}}" [clearable]="false"> <ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm" class="text-center"> <ng-template #{{item.description}}> <span>{{item.description}}</span> </ng-template> <span class="my-custom-class" >{{item.name}} <i class="bi bi-question-circle" style="float: right; z-index: 10;" (click)="onClick(item.description)"></i></span> </ng-template> </ng-select> <div [ngClass]="!department ? 'invalid': 'valid'" id="department" class="form-text">Required.</div> </div>