Hello,

To effectively apply custom styles to the igx-dialog component in your Angular application, it's essential to configure both the SCSS and TypeScript files appropriately. Here's a comprehensive guide:

1. Importing the Theming Module

Ensure you've imported the Ignite UI for Angular theming module correctly. For versions prior to 13, use:

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

For version 13 and above, use:

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

2. Defining a Custom Dialog Theme

Create a custom theme by extending the dialog-theme and setting your desired parameters:

$my-dialog-theme: dialog-theme(
  $background: #011627,
  $title-color: #ECAA53,
  $message-color: #FEFEFE,
  $border-radius: 0.3
);

3. Applying the Theme

To apply the custom theme, include it in your styles. If your component uses Emulated ViewEncapsulation, penetrate this encapsulation using ::ng-deep:

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

If $legacy-support is set to false (default), include the component CSS variables like this:

:host {
  @include css-vars($my-dialog-theme);
}

4. Providing an Overlay Outlet

Since the dialog uses the IgxOverlayService, ensure your custom theme reaches the dialog window by providing a specific outlet in your template:

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

5. Import Necessary Modules

Begin by importing the required classes from Angular's core and Ignite UI for Angular:

import { Component, ViewChild, OnInit } from '@angular/core';
import { IgxOverlayOutletDirective, IgxDialogComponent, CloseScrollStrategy, GlobalPositionStrategy } from 'igniteui-angular';

6. Define ViewChild Decorators

In your component class, use the @ViewChild decorator to reference the overlay outlet directive and the dialog component:

export class YourComponent implements OnInit {

  @ViewChild(IgxOverlayOutletDirective, { static: true })
  public outlet: IgxOverlayOutletDirective;

  @ViewChild('dialog1', { read: IgxDialogComponent, static: true })
  public dialog: IgxDialogComponent;

  private _dialogOverlaySettings;
}

Here:

• outlet captures the IgxOverlayOutletDirective from your template.
• dialog references the IgxDialogComponent identified by the template reference variable #dialog1.

7. Initialize Overlay Settings

Within the ngOnInit lifecycle hook, define the overlay settings for your dialog:

public ngOnInit() {
  this._dialogOverlaySettings = {
    modal: true,
    outlet: this.outlet,
    scrollStrategy: new CloseScrollStrategy(),
    positionStrategy: new GlobalPositionStrategy()
  };
}

This configuration ensures that the dialog behaves as a modal, utilizes the specified outlet, and applies the desired scroll and position strategies.

8. Create a Method to Open the Dialog

Implement a method to open the dialog with the defined settings:

public openDialog() {
  this._dialogOverlaySettings.outlet = this.outlet;
  this.dialog.open(this._dialogOverlaySettings);
}

This method assigns the outlet to the overlay settings and opens the dialog accordingly.

Reference Sample for Implementation

For a complete example of how this is implemented, check out this working sample on StackBlitz.

The described scenario could be observed here:

By following these steps, you can effectively control the igx-dialog component programmatically and apply custom styles as needed.

For more detailed information, refer to the official documentation:

• Angular Dialog Window Component Overview
• Styling the Dialog Component

These resources provide comprehensive guidance on managing and styling the igx-dialog component in Angular applications.

Regards,

Georgi Anastasov

Associate Software Developer

Infragistics