Adding button to the bottom of typeahead popup in Angular with bootstrap

Question

Im struggling with adding button to the bottom of typeahead. Something like this : What I would like to achieve:

I tried to achieve this for two days, unsuccessfully. Can someone give me a hand ? https://stackblitz.com/edit/angular-kjnyqx?file=app%2Ftypeahead-basic.html

Unfortunately, there is little information on the web on how such a thing could be achieved. For example, here : https://ng-bootstrap.github.io/#/components/typeahead/examples there is nothing like it

Answer 1

Refer to the below code to add one button to the last option of a select control in angular.

In your component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-your',
  templateUrl: './your.component.html',
  styleUrls: ['./your.component.css']
})
export class YourComponent {
  options = ['Option 1', 'Option 2', 'Option 3']; // assuming option to render

 handleButtonClick() {
   
   console.log('Button clicked for the last option'); // Handle button click logic here
  }
}

In component.html:

<select>
  <option *ngFor="let option of options; let last = last" [value]="option">
    {{ option }}
    <!-- Add a button for the last option -->
    <ng-container *ngIf="last">
      <button (click)="handleButtonClick()">Click Me</button>
    </ng-container>
  </option>
</select>

Please adopt this accordingly to your bootstrap version.