Incorporate a Custom Icon into NbSelect

I am currently utilizing Nebular in a project, where multiple dropdowns are being used as shown below:

<nb-select fullWidth placeholder="Office" formControlName="office">
  <nb-option value="Office_A"&bt;Office A</nb-option>
</nb-select>

Here is an example of how it looks:

https://i.sstatic.net/1fdCz.png

I am looking to add a close (x) icon next to the down chevron in the dropdown, similar to the image below:

Ideation Image

Additionally, I would like to incorporate an onClick event for that particular icon.

Is there any possibility to achieve this functionality?

Edit: I am open to exploring workarounds even if they are not features directly provided by Nebular itself.

angulartypescriptnebular

Answer №1

If you want to enhance the select element with an extra icon, you can do so by using the nb-form-field component.

 <nb-form-field>
      <nb-icon nbSuffix icon="alert-circle-outline"></nb-icon>
      <nb-select placeholder="Select Showcase">
        <nb-option>Reset</nb-option>
        <nb-option value="1">Option 1</nb-option>
        <nb-option value="2">Option 2</nb-option>
        <nb-option value="3">Option 3</nb-option>
      </nb-select>
  </nb-form-field>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular 4 with Typescript allows for the quick and easy deletion of multiple selected rows

I am currently working on an application where I need to create a function that will delete the selected checkboxes from an array. I have managed to log the number of checkboxes that are selected, but I am struggling to retrieve the index numbers of these ...

javascriptangulartypescript

Angular is experiencing difficulty locating the routing path for the auxiliary `router-outlet`

Exploring the intricacies of routing in Angular to gain a deeper understanding of the concept. Encountering an issue where I am receiving an exception NG04002: Cannot match any routes. URL Segment: 'about' when attempting to click on the About li ...

angulartypescriptangular-routing

Unraveling the structural directive string syntax within our custom Angular directive: A step-by-step guide

As previously mentioned, I am interested in using the current string-based syntax for structural directives within a custom directive. <element *ngFor='let x of array;let last = last;'></element> I have been unable to find detaile ...

angularangular-directiveangular2-directives

Implement new interface methods on-the-fly

I am seeking a way to dynamically incorporate methods that are defined in an interface. Initially, I considered using the index signature approach, but unfortunately, not all methods have the same signature. My objective is to preserve all type information ...

typescript

Tips on how to create a loop without using a collection in Angular 2

I have a specific quantity and I need to repeat an action that many times. for (var _i = 0; _i < length; _i++) I am trying to replicate this logic in the html template. If I use ngFor, I would typically require a collection, but in this case I only ha ...

angularangular2-directives

The TypeScript compiler generates a blank JavaScript file within the WebStorm IDE

My introduction to TypeScript was an interesting experience. I decided to convert a simple JavaScript application, consisting of two files, into TypeScript. The first file, accounts.ts, contains the main code, while the second one, fiat.ts, is a support f ...

javascripttypescriptwebstorm

Issues with tsconfig Path Aliases in Angular 8+ when used in .spec files

While working on Angular testing, I encountered an issue where my spec files were not recognizing paths and displaying a red squiggle import warning in VS Code (and appearing under Problems), even though they functioned properly otherwise (testing worked, ...

angulartypescripttestingvisual-studio-codejestjs

What is the best way to utilize *ngFor for looping in Angular 6 in order to display three images simultaneously?

I have successfully added 3 images on a single slide. How can I implement *ngFor to dynamically load data? <carousel> <slide> <img src="../../assets/wts1.png" alt="first slide" style="display: inline-blo ...

angularhtmlcssangular-materialcarousel

Encountered an issue while attempting to authenticate CMS signature using pkijs

I am attempting to validate a CMS signature generated with open ssl using the following command: $ openssl cms -sign -signer domain.pem -inkey domain.key -binary -in README.md -outform der -out signature Below is my code utilizing pkijs: import * as pkij ...

typescriptsslopensslpki

What is causing this issue in TypeScript version 4.8?

After updating to TypeScript 4.8 in VSCode, I have encountered an error in one of my React projects that was not present before. Strangely, this error does not prevent the code from compiling successfully when building the project. It's challenging to ...

reactjstypescripttypescript-generics

A more efficient method for refreshing Discord Message Embeds using a MessageComponentInteraction collector to streamline updates

Currently, I am working on developing a horse race command for my discord bot using TypeScript. The code is functioning properly; however, there is an issue with updating an embed that displays the race and the participants. To ensure the update works co ...

javascripttypescriptdiscorddiscord.js

The specified property cannot be found on the Window type and the globalThis typeof

I encountered an error in my Electron-React-Typescript app that reads: Property 'api' does not exist on type 'Window & typeof globalThis'. window.api.send('open-type-A-window', ''); The issue seems to be related ...

reactjstypescriptelectron

Problem integrating 'fs' with Angular and Electron

Currently, I am working with Angular 6.0, Electron 2.0, TypeScript 2.9, and Node.js 9.11 to develop a desktop application using the Electron framework. My main challenge lies in accessing the Node.js native API from my TypeScript code. Despite setting "com ...

node.jsangulartypescriptelectronfs

What could be causing the need for RxJs TypeScript files to be requested exclusively when my website is hosted on IIS?

When I develop my site using Visual Studio / IIS Express, everything runs smoothly without any unusual requests or 404 errors. However, once I publish the site to IIS and try to run it, I start receiving multiple requests for typescript files (.ts), prima ...

angulartypescriptrxjsiis-8

Android encountered an unknown error while trying to access the URL, resulting in an HTTP failure response with a status

My Ionic app runs perfectly fine on iOS, but when I try to run it on Android, I encounter the following error: Http failure response for (unknown url): 0 Unknown Error https://i.stack.imgur.com/8EFna.png I have CORS enabled on the server side and it wor ...

androidnode.jsangularcordovaionic-framework

Creating a method in Angular that combines async/await functionality with Observables

After transitioning from using async/await to Observables in Angular, I am trying to refactor the following code snippet to make it work with Observables: async refreshToken() { const headers = this.authStorage.getRequestHeader(); const body = { ...

javascriptangulartypescriptpromiseobservable

Trouble with HTTP.GET Request within a Previous Event Situation

Whenever I attempt to use a previous event to fetch data from my API, the information seems to disappear once outside the subscribe block. I experimented with relocating the service outside of the component, but encountered the same issue. myObject :S ...

angularangular7

Encapsulating functions with multiple definitions in Typescript

Struggling with wrapping a function that can have multiple return types based on input parameters in Typescript. Imagine wanting a function to return ReturnA for VariantEnum.a and ReturnB for VariantEnum.b. Consider this implementation of sampleFunction: ...

typescript

Guide to implementing validation in an angular 2 dropdown using the Model-driven Approach

When the user clicks the submit button, the dropdown validation does not occur. I want the form to be validated if the user does not select any value, and in that case, the form state should be invalid. In my scenario, I have disabled the submit button whe ...

angularvalidationangular2-forms

Tips on ensuring all fields are mandatory in a form

Currently, I am in the process of working on my Angular2 project. Specifically, I have created a form and my intention is to make all fields required. However, I encountered an issue when attempting to make the Title field mandatory as it is not displaying ...

angular