How can i change the background color of the previously Selected Item

I am wondering how i can overwrite the color that Igx-drop-down uses to show the previous selection. In my use case i want the user not to see the previous selection. The code that i am using is like this which i uses as a reusable component

<button [igxToggleAction]="quickActionsDropdown"
        type="button"
        [igxToggleOutlet]="outletQuickActionsDropdown"
        [igxDropDownItemNavigation]="quickActionsDropdown"
        igxButton="icon" [overlaySettings]="overlaySettings"
        igxRipple>
    <igx-icon [style.color]="'white'">add</igx-icon>
</button>

<igx-drop-down #quickActionsDropdown (selectionChanging)="onSelection($event)" #toggleDirective>

    <igx-drop-down-item *ngFor="let item of items" [value]="item" class="small-menu-item">
        <igx-icon>{{item.icon}}</igx-icon>
        <span>{{ item.text }}</span>
    </igx-drop-down-item>

</igx-drop-down>

<div class="overlayOutlet" igxOverlayOutlet #outletQuickActionsDropdown="overlay-outlet"></div>

FYI when i try the menu solution with

    public onSelection(eventArgs: ISelectionEventArgs) {
        this.text = eventArgs.newSelection.value;
        eventArgs.cancel = true;
    }

It does not work as even so the item is no longer highlighted but after clicking the drop down no longer closes

StackBlitz Sample

Hello David,

I have been looking into your question and what I could suggest in order to achieve your requirement is using the closing and opening events of IgxDropDownComponent. When the dropdown is closing the closing event is fired and in the event handler you can access the selected item and unselected it. This way item would not be selected and highlighted the next time the dropdown is opened.

public handleClosing(event){
        event.owner.selectedItem.selected = false;
}

Then when the dropdown is opened again the selected element will be focused and so its background will be different from the others, so in order to prevent this focus, my suggstion is to hadle the dropdown opened event where you can access the focused element and remove the focus as follows:

public handleOpened(event){
        event.owner.focusedItem.focused = false;
}

In addition, I have prepared a small sample illustrating my suggestion which could be found here. Please test it on your side and let me know how it behaves.

Please do not hesitate to contact me if you need any further assistance with this matter.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics

I am wondering what the same as the above would look like for the igx-select as the above events dont exist on the igx-select. Here is a StackBlitz IGX-SELECT Sample.

Also is there a way for dropdown or select to change the select color or color of a specific row in the item list ?

Hello David,

I noticed that there is a forum thread regarding the same query. Please, keep in mind that according to our support policy we handle singe thread per issues. This helps us ensure that all issues are addressed and handled correctly.

Please take a look at this forum thread where I have already provided an answer and let me know if you have any additional questions.

Thank you for using Infragistics components.

Sincerely,
Georgi Anastasov
Entry Level Software Developer
Infragistics

Thanks, that makes it more clear on how to achieve my goals. The only question i have left is how can i get rid or change the color the selected row will have when user clicks on it ? in my case its the pink in your sample its the blue. Even so its not a major issue i would like to remove or change for a look and feel.

Hello David,

I have been looking into your question and changing or removing the styles of an igx-select component and an igx-dropdown component can be done by styling the given component. In this case, this can be accomplished by changing the styles in the drop-down-theme.

First, in order to use the functions exposed by the theme engine, you need to import the index file in your style.scss file.

@use "igniteui-angular/theming" as *;    

After that a custom theme is created in your style file and in this custom theme you change the styles according to how you want the igx-select and igx-dropdown components to look.

$custom-drop-down-theme: drop-down-theme(
    $background-color: #fdfdfd,
    $header-text-color: black,
    $item-text-color: black,
    $selected-item-background: #000000,
    $selected-item-text-color: yellow,
    $selected-hover-item-background: #000000,
    $selected-hover-item-text-color: yellow,
    $selected-focus-item-background: #000000,
    $selected-focus-item-text-color: yellow,
    $hover-item-background: rgba(0, 0, 0, 0.541),
    $hover-item-text-color: yellow,
);

The last step is to pass the custom drop-down theme and to include it.

@include css-vars($custom-drop-down-theme);

In addition, I have prepared a small sample which shows a custom theme that changes the colors of igx-select and igx-dropdown components and a regular theme that removes them which could be found here. Please try both options and let me know if this is the expected behavior.

Please do not hesitate to contact me if you need any further assistance with this matter.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics