### File

`projects/commons/src/lib/elements/dialog/components/dialog.component.ts`

### Implements

`OnInit`

### Metadata

encapsulation | `ViewEncapsulation.None`
selector | `cmn-dialog`
templateUrl | `./dialog.component.html`

### Index

###### Properties
Private afterClosed$ Public Readonly backdropButtonEl Public Readonly cancelButtonEl Public componentInstance Public Readonly componentSection Public config Public Readonly footerEl Private fromOkButton Public hasComponent Public Readonly headerEl Public Readonly okButtonEl Public open Public ready
###### Methods
Public _setComponent Private actionHandler Public afterClosed Public animationDone Public backdropHandler Public cancelHandler Public dismiss Public ngOnInit Public okHandler
###### HostListeners
document:keydown.escape

### Constructor

`constructor(componentFactoryResolver: ComponentFactoryResolver)`
Defined in projects/commons/src/lib/elements/dialog/components/dialog.component.ts:55
Parameters :
Name | Type | Optional
componentFactoryResolver | `ComponentFactoryResolver` | No

### HostListeners

document:keydown.escape
`document:keydown.escape()`
Defined in projects/commons/src/lib/elements/dialog/components/dialog.component.ts:65

### Methods

Public _setComponent
`_setComponent(componentOrTemplateRef: ComponentType | TemplateRef)`
Defined in projects/commons/src/lib/elements/dialog/components/dialog.component.ts:100
Parameters :
Name | Type | Optional
componentOrTemplateRef | `ComponentType<T> | TemplateRef<T>` | No
Returns : `void`

Private actionHandler
`actionHandler(action: "okHandler" | "cancelHandler", isDismiss: boolean)`
Defined in projects/commons/src/lib/elements/dialog/components/dialog.component.ts:113
Parameters :
Name | Type | Optional | Default value
action | `"okHandler" | "cancelHandler"` | No |
isDismiss | `boolean` | No | `false`
Returns : `void`

Public afterClosed
`afterClosed()`
Defined in projects/commons/src/lib/elements/dialog/components/dialog.component.ts:96
Returns : `Observable<boolean>`

Public animationDone
`animationDone(event: AnimationEvent)`
Defined in projects/commons/src/lib/elements/dialog/components/dialog.component.ts:89
Parameters :
Name | Type | Optional
event | `AnimationEvent` | No
Returns : `void`

Public backdropHandler
`backdropHandler()`
Defined in projects/commons/src/lib/elements/dialog/components/dialog.component.ts:69
Returns : `void`

Public cancelHandler
`cancelHandler()`
Defined in projects/commons/src/lib/elements/dialog/components/dialog.component.ts:75
Returns : `void`

Public dismiss
`dismiss(fromOkButton: boolean)`
Defined in projects/commons/src/lib/elements/dialog/components/dialog.component.ts:83
Parameters :
Name | Type | Optional
fromOkButton | `boolean` | No
Returns : `void`

Public ngOnInit
`ngOnInit()`
Defined in projects/commons/src/lib/elements/dialog/components/dialog.component.ts:59
Returns : `void`

Public okHandler
`okHandler()`
Defined in projects/commons/src/lib/elements/dialog/components/dialog.component.ts:79
Returns : `void`

### Properties

Private afterClosed$
Type : `Subject<any>`
Default value : `new Subject()`
Defined in projects/commons/src/lib/elements/dialog/components/dialog.component.ts:55

Public Readonly backdropButtonEl
Type : `ElementRef`
Decorators : `@ViewChild('backdropButton')`
Defined in projects/commons/src/lib/elements/dialog/components/dialog.component.ts:44

Public Readonly cancelButtonEl
Type : `ElementRef`
Decorators : `@ViewChild('cancelButton')`
Defined in projects/commons/src/lib/elements/dialog/components/dialog.component.ts:43

Public componentInstance
Type : `T`
Defined in projects/commons/src/lib/elements/dialog/components/dialog.component.ts:49

Public Readonly componentSection
Type : `ViewContainerRef`
Decorators : `@ViewChild('componentSection', {read: ViewContainerRef})`
Defined in projects/commons/src/lib/elements/dialog/components/dialog.component.ts:45

Public config
Type : `IDialogConfig`
Defined in projects/commons/src/lib/elements/dialog/components/dialog.component.ts:51

Public Readonly footerEl
Type : `ElementRef`
Decorators : `@ViewChild('footer')`
Defined in projects/commons/src/lib/elements/dialog/components/dialog.component.ts:41

Private fromOkButton
Default value : `false`
Defined in projects/commons/src/lib/elements/dialog/components/dialog.component.ts:54

Public hasComponent
Default value : `false`
Defined in projects/commons/src/lib/elements/dialog/components/dialog.component.ts:50

Public Readonly headerEl
Type : `ElementRef`
Decorators : `@ViewChild('header')`
Defined in projects/commons/src/lib/elements/dialog/components/dialog.component.ts:40

Public Readonly okButtonEl
Type : `ElementRef`
Decorators : `@ViewChild('okButton')`
Defined in projects/commons/src/lib/elements/dialog/components/dialog.component.ts:42

Public open
Default value : `false`
Defined in projects/commons/src/lib/elements/dialog/components/dialog.component.ts:48

Public ready
Default value : `new EventEmitter<boolean>()`
Defined in projects/commons/src/lib/elements/dialog/components/dialog.component.ts:52

    import { Observable, Subject } from 'rxjs';
    import { animate, keyframes, style, transition, trigger } from '@angular/animations';

    import {
        Component, ComponentFactoryResolver, ElementRef, EventEmitter, HostListener, OnInit,
        TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation
    } from '@angular/core';

    import { IDialogConfig } from '../interfaces';

    interface ComponentType<T> {
        new(...args: any[]): T;
    }

    @Component({
        selector: 'cmn-dialog',
        templateUrl: './dialog.component.html',
        encapsulation: ViewEncapsulation.None,
        animations: [
            trigger('modalState', [
                transition(
                    'void => active',
                    animate('200ms', keyframes([
                        style({ opacity: '0', top: '5%', offset: 0 }),
                        style({ opacity: '1', top: '0', offset: 1 })
                    ]))
                ),
                transition(
                    'active => inactive',
                    animate('200ms', keyframes([
                        style({ opacity: '1', offset: 0 }),
                        style({ opacity: '0', top: '5%', offset: 1 })
                    ]))
                )
            ])
        ]
    })

    export class DialogComponent<T> implements OnInit {
        @ViewChild('header') public readonly headerEl: ElementRef;
        @ViewChild('footer') public readonly footerEl: ElementRef;
        @ViewChild('okButton') public readonly okButtonEl: ElementRef;
        @ViewChild('cancelButton') public readonly cancelButtonEl: ElementRef;
        @ViewChild('backdropButton') public readonly backdropButtonEl: ElementRef;
        @ViewChild('componentSection', { read: ViewContainerRef }) public readonly componentSection: ViewContainerRef;

        public open = false;
        public componentInstance: T;
        public hasComponent = false;
        public config: IDialogConfig;
        public ready = new EventEmitter<boolean>();

        private fromOkButton = false;
        private afterClosed$: Subject<any> = new Subject();

        constructor(private readonly componentFactoryResolver: ComponentFactoryResolver) {}

        public ngOnInit() {
            this.open = true;
            this.ready.next(true);
        }

        @HostListener('document:keydown.escape')
        public keypress() {
            this.backdropHandler();
        }

        public backdropHandler() {
            if (this.config.hasBackdrop) {
                this.dismiss(false);
            }
        }

        public cancelHandler() {
            this.actionHandler('cancelHandler');
        }

        public okHandler() {
            this.actionHandler('okHandler', true);
        }

        public dismiss(fromOkButton: boolean) {
            this.open = false;

            this.fromOkButton = fromOkButton;
        }

        public animationDone(event: AnimationEvent) {
            if ((event as any).fromState === 'active' && (event as any).toState === 'inactive') {
                this.afterClosed$.next(this.fromOkButton);
                this.afterClosed$.complete();
            }
        }

        public afterClosed(): Observable<boolean> {
            return this.afterClosed$.asObservable();
        }

        public _setComponent(componentOrTemplateRef: ComponentType<T> | TemplateRef<T>) {
            if (componentOrTemplateRef instanceof TemplateRef) {
                this.componentSection.createEmbeddedView(componentOrTemplateRef);
            } else {
                const factory = this.componentFactoryResolver.resolveComponentFactory(componentOrTemplateRef);
                const componentRef = this.componentSection.createComponent(factory);

                this.componentInstance = componentRef.instance as T;
            }

            this.hasComponent = true;
        }

        private actionHandler(action: 'okHandler' | 'cancelHandler', isDismiss: boolean = false) {
            if (this.config[action]) {
                this.config[action]();
            } else {
                this.dismiss(isDismiss);
            }
        }
    }

    <div class="modal is-active">
        <div class="modal-background"
             (click)="backdropHandler()">
        </div>
        <div class="modal-card"
             [@modalState]="open ? 'active' : 'inactive'"
             (@modalState.done)="animationDone($event)"
             [ngStyle]="{ 'width': config.width }">
            <header class="modal-card-head"
                    *ngIf="config.title"
                    #header>
                <p class="modal-card-title">
                    {{ config.title }}
                </p>
                <button *ngIf="config.hasBackdrop"
                        class="delete"
                        (click)="backdropHandler()"
                        #backdropButton>
                </button>
            </header>

            <section *ngIf="config.loading"
                     class="modal-card-body">
                loading ...
            </section>

            <section class="modal-card-body"
                     *ngIf="!config.loading && config.message"
                     [innerHTML]="config.message">
            </section>

            <section class="modal-card-body"
                     [ngClass]="{ 'is-hidden': !hasComponent || config.loading}">
                <div #componentSection></div>
            </section>

            <footer class="modal-card-foot"
                    *ngIf="!config.loading && (config.cancelButtonText || config.okButtonText)"
                    #footer>
                <button class="button is-medium is-danger"
                        *ngIf="config.cancelButtonText"
                        (click)="cancelHandler()"
                        #cancelButton>
                    {{ config.cancelButtonText }}
                </button>
                <button class="button is-medium is-primary"
                        *ngIf="config.okButtonText"
                        (click)="okHandler()"
                        #okButton>
                    {{ config.okButtonText }}
                </button>
            </footer>
        </div>
    </div>

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""