Hello,

I have been looking into your question and your requirements to style igx-dialog components in each of your individual components could be achieved with Ignite UI Angular Theming.

To get started with styling the dialog windows, you need to import the index file in each .scss component file, where all the theme functions and component mixins live:

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

Next you will create a new theme for each dialog in each component that extends the dialog-theme and accepts parameters that style the dialogs:

$my-dialog-theme: dialog-theme(
               $background: #011627,
               $title-color: #ecaa53,
               $message-color: #fefefe,
               $border-radius: .3,
);

Since the dialog windows use the IgxOverlayService, in order for our each custom theme to reach down the each dialog window that you want to style, you will provide a specific outlet where the dialog window will be placed in the DOM when it is visible. In short, you'll set the igxOverlayOutlet directive on each element that contains the dialog itself:

<div igxOverlayOutlet>
    <igx-dialog #dialog1>
    </igx-dialog>
</div>

The last step is to include the component theme in each of yours components:

:host {
     ::ng-deep {
        @include dialog($my-dialog-theme);
    }
}

The described scenario could be observed here:

In addition, I have prepared small sample with two components that each has single igx-dialog component. The two child components is included in the parent app.component and and each component implements the above approach to style its igx-dialog. This sample could be found here. Please test it on your side and let me know how it behaves.

If you require any further assistance on the matter, please let me know.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics

:host {
               ::ng-deep {
                              @include css-vars($my-dialog-theme);
                              .igx-dialog__window{
                                             width: 300px;
                                             height: 500px;
                                             display: flex;
                                            flex-direction: column;
                                            justify-content: space-between;
                              }
               }
}

I have modified my previous sample illustrating this suggestion which could be found here. Please test it on your side and let me know how it behaves.

Thank you for your cooperation.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics