Create 2 themes for igx-dropdown and use them in the same App

[pmoleri]

Let's say I need 2 different themes for igx-dropdown. One with gray background and the other with white one.

I would do it like this:

<igx-drop-down class="white">
    <igx-drop-down-item *ngFor="let item of items">
        {{ item.field }}
    </igx-drop-down-item>
</igx-drop-down>

<igx-drop-down class="gray">
    <igx-drop-down-item *ngFor="let item of items">
        {{ item.field }}
    </igx-drop-down-item>
</igx-drop-down>

@import '~igniteui-angular/lib/core/styles/themes/index';

$dropdown-white-theme: igx-dropdown-theme(
    $background-color : white;
);

$dropdown-gray-theme: igx-dropdown-theme(
    $background-color : gray;
);

::ng-deep igx-dropdown.white {
 @include igx-css-vars($dropdown-white-theme);
}

::ng-deep igx-dropdown.gray{
 @include igx-css-vars($dropdown-gray-theme);
}

The problem I have is that the classes don't propagate to the overlay, so I can't isolate the themes and they step over each other.

Is there some way to achieve this? Otherwise, I think all components that open in overlay should accept something like a [overlayClass] property, so we can easily set styles to a particular instance.

[wnvko]

To achieve this you should use outlet as described in the documentation here. For each drop down you should have separate outlet and set the necessary class to the outlet element. With styles as per your sample you should have this in the markup:

<button igxButton (click)="white.toggle({ outlet: whiteOutlet })">
  Open white
</button>
<igx-drop-down #white>
  <igx-drop-down-item *ngFor="let item of items">
    {{ item.field }}
  </igx-drop-down-item>
</igx-drop-down>

<button igxButton (click)="elevated.toggle({ outlet: elevatedOutlet })">
  Open elevated
</button>
<igx-drop-down #elevated>
  <igx-drop-down-item *ngFor="let item of items">
    {{ item.field }}
  </igx-drop-down-item>
</igx-drop-down>

<div igxOverlayOutlet #whiteOutlet="overlay-outlet" class="white"></div>

<div igxOverlayOutlet #elevatedOutlet="overlay-outlet" class="elevated"></div>

Here is a Stackblitz showing how to achieve this.

[pmoleri]

Hey @wnvko, thanks for the solution, it makes sense. We will be using it. However, take this a feedback, it doesn't look great to me, it feels like an uncomfortable workaround compared to having something like an [overlayClass] property, don't you think so?