Angular Dialog Window 구성 요소 개요

Ignite UI for Angular Dialog Window 구성 요소를 사용하여 메시지를 표시하거나 사용자가 작성할 양식을 제시합니다. 이 구성 요소는 앱 콘텐츠 위에 가운데에 있는 대화 상자를 엽니다. 사용자가 취소할 수 있는 표준 알림 메시지를 제공할 수도 있습니다.

Angular Dialog Window Example

Getting Started with Ignite UI for Angular Dialog Window

Ignite UI for Angular Dialog Window 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.

ng add igniteui-angular

Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.

The next step is to import the IgxDialogModule in your app.module.ts file.

// app.module.ts

...
import { IgxDialogModule } from 'igniteui-angular';
// import { IgxDialogModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxDialogModule],
    ...
})
export class AppModule {}

Alternatively, as of 16.0.0 you can import the IgxDialogComponent as a standalone dependency, or use the IGX_DIALOG_DIRECTIVES token to import the component and all of its supporting components and directives.

// home.component.ts

import { IGX_DIALOG_DIRECTIVES, IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular';
// import { IGX_DIALOG_DIRECTIVES, IgxButtonDirective, IgxRippleDirective } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <button igxButton="contained" igxRipple="white" (click)="alert.open()">Show Alert Dialog</button>

    <igx-dialog #alert
        title="Notification"
        message="Your email has been sent successfully!"
        leftButtonLabel="OK"
        (leftButtonSelect)="alert.close()">
    </igx-dialog>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_DIALOG_DIRECTIVES, IgxButtonDirective, IgxRippleDirective]
    /* or imports: [IgxDialogComponent, IgxButtonDirective, IgxRippleDirective] */
})
export class HomeComponent {}

Now that you have the Ignite UI for Angular Dialog Window module or directives imported, you can start using the igx-dialog component.

Using the Angular Dialog Window

Alert Dialog

To create an alert dialog, in the template of our email component, we add the following code. We have to set the title, message, leftButtonLabel and handle leftButtonSelect event:

<!--email.component.html-->
<button igxButton="contained" igxRipple="white" (click)="alert.open()">Show Alert Dialog</button>

<igx-dialog #alert
    title="Notification"
    message="Your email has been sent successfully!"
    leftButtonLabel="OK"
    (leftButtonSelect)="alert.close()">
</igx-dialog>

모든 작업이 올바르게 완료되면 위에 표시된 데모 샘플이 브라우저에 표시됩니다.

Standard Dialog

To create a standard dialog, in the template of our file manager component, we add the following code. We have to set the title, message, leftButtonLabel, rightButtonLabel, and handle leftButtonSelect and rightButtonSelect events:

<!--file-manager.component.html-->
<button igxButton="contained" igxRipple="white" (click)="dialog.open()">Show Confirmation Dialog</button>

<igx-dialog #dialog title="Confirmation"
    leftButtonLabel="Cancel"
    (leftButtonSelect)="dialog.close()"
    rightButtonLabel="OK"
    (rightButtonSelect)="onDialogOKSelected($event)"
    message="Are you sure you want to delete the Microsoft_Annual_Report_2015.pdf and Microsoft_Annual_Report_2015.pdf files?">
</igx-dialog>

Custom Dialog

To create a custom dialog, in the template of our sign-in component, we add the following code. The dialog title area can be customized using the igxDialogTitle directive or the igx-dialog-title selector. The actions area can be customized using the igxDialogActions directive or the igx-dialog-actions selector. We add two input groups consisting of a label and and input decorated with the igxLabel and igxInput directives.

<!--sign-in.component.html-->
<button igxButton="contained" igxRipple="white" (click)="alert.open()">Show Custom Dialog</button>

<igx-dialog #form [closeOnOutsideSelect]="true">
    <igx-dialog-title>
        <div class="dialog-container">
            <igx-icon>vpn_key</igx-icon>
            <div class="dialog-title">Sign In</div>
        </div>
    </igx-dialog-title>

    <form class="signInForm">
        <igx-input-group>
            <igx-prefix>
                <igx-icon>person</igx-icon>
            </igx-prefix>
            <label igxLabel for="username">Username</label>
            <input igxInput id="username" type="text"/>
        </igx-input-group>
        <igx-input-group>
            <igx-prefix>
                <igx-icon>lock</igx-icon>
            </igx-prefix>
            <label igxLabel>Password</label>
            <input igxInput id="password" type="password"/>
        </igx-input-group>
    </form>

    <div igxDialogActions>
        <button igxButton (click)="form.close()">CANCEL</button>
        <button igxButton (click)="form.close()">SIGN IN</button>
    </div>
</igx-dialog>

Position and Animation Settings

There are two ways to change the position at which the igx-dialog will be shown:

• Using open method and pass a valid overlaySettings. Example:

import { PositionSettings, OverlaySettings, GlobalPositionStrategy, NoOpScrollStrategy, HorizontalAlignment, VerticalAlignment } from 'igniteui-angular';
// import { PositionSettings, OverlaySettings, GlobalPositionStrategy, NoOpScrollStrategy, HorizontalAlignment, VerticalAlignment } from '@infragistics/igniteui-angular'; for licensed package

@Component({...})
export class HomeComponent {
    public positionSettingsOnOpen: PositionSettings = {
        horizontalDirection: HorizontalAlignment.Right,
        verticalDirection: VerticalAlignment.Middle,
        horizontalStartPoint: HorizontalAlignment.Right,
        verticalStartPoint: VerticalAlignment.Middle,
    };
    public overlaySettings: OverlaySettings = {
        positionStrategy: new GlobalPositionStrategy(this.positionSettingsOnOpen),
        scrollStrategy: new NoOpScrollStrategy(),
        modal: false,
        closeOnOutsideClick: true
    };

    public openDialog() {
        this.alert.open(this.overlaySettings);
    }
}

• Using the positionSettings @Input. Example:

<igx-dialog #alert title="Notification" [positionSettings]="positionSettings" >
</igx-dialog>

import { useAnimation } from '@angular/animations';
import { PositionSettings, HorizontalAlignment, VerticalAlignment } from 'igniteui-angular';
// import { PositionSettings, HorizontalAlignment, VerticalAlignment } from '@infragistics/igniteui-angular'; for licensed package

@Component({...})
export class HomeComponent {
    public positionSettings: PositionSettings = {
        openAnimation: useAnimation(slideInTop, { params: { duration: '2000ms' } }),
        closeAnimation: useAnimation(slideOutBottom, { params: { duration: '2000ms'} }),
        horizontalDirection: HorizontalAlignment.Left,
        verticalDirection: VerticalAlignment.Middle,
        horizontalStartPoint: HorizontalAlignment.Left,
        verticalStartPoint: VerticalAlignment.Middle,
        minSize: { height: 100, width: 100 }
    };
}

Note

The same approach should be used for the animation settings, use the openAnimation and closeAnimation properties to define animation params like duration. params object example:

params: {
    delay: '0s',
    duration: '350ms',
    easing: EaseOut.quad,
    endOpacity: 1,
    fromPosition: 'translateX(-500px)',
    startOpacity: 0,
    toPosition: 'translateY(0)'
}

Trap focus inside dialog

By default when the dialog is opened the Tab key focus is trapped within it, i.e. the focus does not leave the element when the user keeps tabbing through the focusable elements. When the focus leaves the last element, it moves to the first one and vice versa, when SHIFT + TAB is pressed, when the focus leaves the first element, the last element should be focused. In case the dialog does not contain any focusable elements, the focus will be trapped on the dialog container itself. This behavior can be changed by setting the focusTrap property.

스타일링

Dialog Theme Property Map

Changing the $background property automatically updates the following dependent properties:

기본 속성	종속 속성	설명
$background	$title색	대화 제목 텍스트 색상.
	$message색	대화 메시지 텍스트 색상.
	$border색	대화 구성 요소에 사용되는 테두리 색상.

To get started with styling the dialog window, we need to import the index file, where all the theme functions and component mixins live:

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

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

Following the simplest approach, we create a new theme that extends the dialog-theme and accepts parameters that style the dialog. By providing the $background, the theme automatically selects suitable contrast colors for the foreground properties. However, you can still manually define them if desired.

$my-dialog-theme: dialog-theme(
  $background: #011627,
  $title-color: #ecaa53,
  $border-radius: 5px,
);

Note

In order to style any additional components that are used as part of the dialog window's content (such as the IgxButton), an additional theme should be created that is specific to the respective component and is placed under the dialog window's scope only (so it does not affect the rest of the application).

$custom-button: contained-button-theme(
  $background: #ecaa53,
  $foreground: #011627,
);

Since the dialog window uses the IgxOverlayService, in order for our custom theme to reach down the dialog window that we want to style, we will provide a specific outlet where the dialog window will be placed in the DOM when it is visible.

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

Note

In order to learn more about the various options for providing themes to elements that are shown by using the IgxOverlayService, you can take a look at the Overlay styling topic.

Including Themes

마지막 단계는 애플리케이션에 구성 요소 테마를 포함하는 것입니다.

@include css-vars($my-dialog-theme);

Note

If the component is using an Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep to apply the styles.

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

Demo

API Summary

• IgxDialog구성 요소
• IgxDialog컴포넌트 스타일
• Igx오버레이
• Igx오버레이 스타일

Theming Dependencies

• IgxButton 테마
• IgxRipple 테마
• Igx오버레이 테마

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Ignite UI for Angular 포럼
• ​GitHub Ignite UI for Angular