### File

`src/dialog/dialog.directive.ts`

### Description

A generic directive that can be inherited from to create dialogs (for example, a tooltip or popover)

This class contains the relevant initialization code, specific templates, options, and additional inputs should be specified in the derived class.

NOTE: All child classes should add `DialogService` as a provider, otherwise they will lose context that the service relies on.

### Implements

`OnInit` `OnDestroy` `OnChanges`

### Metadata

Providers | `DialogService`
Selector | `[ibmDialog]`

### Index

###### Properties
dialogConfig Static dialogCounter
###### Methods
close ngOnChanges ngOnDestroy ngOnInit Protected onDialogChanges Protected onDialogInit open toggle
###### Inputs
appendInline appendToBody closeTrigger data gap ibmDialog placement title trigger wrapperClass
###### Outputs
onClose onOpen
###### HostBindings
attr.aria-expanded attr.aria-haspopup attr.aria-owns attr.role
###### HostListeners
touchstart
###### Accessors
appendToBody

### Constructor

`constructor(elementRef: ElementRef, viewContainerRef: ViewContainerRef, dialogService: DialogService)`
Defined in src/dialog/dialog.directive.ts:110
Creates an instance of DialogDirective. Parameters :
Name | Type | Optional
elementRef | `ElementRef` | No
viewContainerRef | `ViewContainerRef` | No
dialogService | `DialogService` | No

### Inputs

`appendInline` | Set to `true` to open the dialog next to the triggering component Default value : `false`
Defined in src/dialog/dialog.directive.ts:87

`appendToBody` | Deprecated. Defaults to true. Use appendInline to keep dialogs within page flow Value `true` appends Dialog to the body (to break out of containers) Type : `boolean`
Defined in src/dialog/dialog.directive.ts:75

`closeTrigger` | Defines how the Dialog close event is triggered. See here for more on the difference between `mouseleave` and `mouseout`. Defaults to `click` when `trigger` is set to `click`. Type : `"mouseout" | "mouseleave"` Default value : `"mouseleave"`
Defined in src/dialog/dialog.directive.ts:58

`data` | Optional data for templates Default value : `{}`
Defined in src/dialog/dialog.directive.ts:91

`gap` | Spacing between the dialog and it's triggering element Default value : `0`
Defined in src/dialog/dialog.directive.ts:70

`ibmDialog` | Dialog body content. Type : `string | TemplateRef<any>`
Defined in src/dialog/dialog.directive.ts:44

`placement` | Placement of the dialog, usually relative to the element the directive is on. Default value : `"left"`
Defined in src/dialog/dialog.directive.ts:62

`title` | Title for the dialog Default value : `""`
Defined in src/dialog/dialog.directive.ts:40

`trigger` | Defines how the Dialog is triggered.(Hover and click behave the same on mobile - both respond to a single tap). Do not add focusable elements if trigger is `hover` or `mouseenter`. Type : `"click" | "hover" | "mouseenter"` Default value : `"click"`
Defined in src/dialog/dialog.directive.ts:49

`wrapperClass` | Class to add to the dialog container Type : `string`
Defined in src/dialog/dialog.directive.ts:66

### Outputs

`onClose` | Emits an event when the dialog is closed `$event` Type: `EventEmitter<any>`
Defined in src/dialog/dialog.directive.ts:99

`onOpen` | Emits an event when the dialog is opened `$event` Type: `EventEmitter<any>`
Defined in src/dialog/dialog.directive.ts:103

### HostBindings

attr.aria-expanded
`attr.aria-expanded: ```
Default value : `false`
Defined in src/dialog/dialog.directive.ts:106

attr.aria-haspopup
`attr.aria-haspopup: ```
Default value : `true`
Defined in src/dialog/dialog.directive.ts:107

attr.aria-owns
`attr.aria-owns: `string``
Type : `string`
Defined in src/dialog/dialog.directive.ts:108

attr.role
`attr.role: ```
Default value : `"button"`
Defined in src/dialog/dialog.directive.ts:105

### HostListeners

touchstart
Arguments : `'$event'`
`touchstart(evt)`
Defined in src/dialog/dialog.directive.ts:127
Overrides 'touchstart' event to trigger a toggle on the Dialog.

### Methods

close
`close()`
Defined in src/dialog/dialog.directive.ts:239
Helper method to call dialogService 'close'. Enforce accessibility by updating an aria attr for nativeElement. Returns : `void`

ngOnChanges
`ngOnChanges()`
Defined in src/dialog/dialog.directive.ts:133
Returns : `void`

ngOnDestroy
`ngOnDestroy()`
Defined in src/dialog/dialog.directive.ts:207
When the host dies, kill the popover. Useful for use in a modal or similar. Returns : `void`

ngOnInit
`ngOnInit()`
Defined in src/dialog/dialog.directive.ts:157
Sets the config object and binds events for hovering or clicking before running code from child class. Returns : `void`

Protected onDialogChanges
`onDialogChanges()`
Defined in src/dialog/dialog.directive.ts:254
Empty method for child to override and specify additional on changes steps. run after DialogDirective completes it's ngOnChanges. Returns : `void`

Protected onDialogInit
`onDialogInit()`
Defined in src/dialog/dialog.directive.ts:248
Empty method for child classes to override and specify additional init steps. Run after DialogDirective completes it's ngOnInit. Returns : `void`

open
`open()`
Defined in src/dialog/dialog.directive.ts:215
Helper method to call dialogService 'open'. Enforce accessibility by updating an aria attr for nativeElement. Returns : `void`

toggle
`toggle()`
Defined in src/dialog/dialog.directive.ts:225
Helper method to call dialogService 'toggle'. Enforce accessibility by updating an aria attr for nativeElement. Returns : `void`

### Properties

dialogConfig
`dialogConfig: `DialogConfig``
Type : `DialogConfig`
Defined in src/dialog/dialog.directive.ts:95
Config object passed to the rendered component

Static dialogCounter
`dialogCounter: `number``
Type : `number`
Default value : `0`
Defined in src/dialog/dialog.directive.ts:36

### Accessors

appendToBody
get `appendToBody()`
Defined in src/dialog/dialog.directive.ts:81
set `appendToBody(v: boolean)`
Defined in src/dialog/dialog.directive.ts:75
Deprecated. Defaults to true. Use appendInline to keep dialogs within page flow Value `true` appends Dialog to the body (to break out of containers) Parameters :
Name | Type | Optional
v | `boolean` | No
Returns : `void`

    import {
    	Directive,
    	Input,
    	Output,
    	EventEmitter,
    	OnInit,
    	OnDestroy,
    	ElementRef,
    	TemplateRef,
    	ViewContainerRef,
    	HostListener,
    	OnChanges,
    	HostBinding
    } from "@angular/core";
    import { fromEvent } from "rxjs";
    import { DialogService } from "./dialog.service";
    import { DialogConfig } from "./dialog-config.interface";

    /**
     * A generic directive that can be inherited from to create dialogs (for example, a tooltip or popover)
     *
     * This class contains the relevant initialization code, specific templates, options, and additional inputs
     * should be specified in the derived class.
     *
     * NOTE: All child classes should add `DialogService` as a provider, otherwise they will lose context that
     * the service relies on.
     */
    @Directive({
    	selector: "[ibmDialog]",
    	exportAs: "ibmDialog",
    	providers: [
    		DialogService
    	]
    })
    export class DialogDirective implements OnInit, OnDestroy, OnChanges {
    	static dialogCounter = 0;
    	/**
    	 * Title for the dialog
    	 */
    	@Input() title = "";
    	/**
    	 * Dialog body content.
    	 */
    	@Input() ibmDialog: string | TemplateRef<any>;
    	/**
    	 * Defines how the Dialog is triggered.(Hover and click behave the same on mobile - both respond to a single tap).
    	 * Do not add focusable elements if trigger is `hover` or `mouseenter`.
    	 */
    	@Input() trigger: "click" | "hover" | "mouseenter" = "click";
    	/**
    	 * Defines how the Dialog close event is triggered.
    	 *
    	 * [See here](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event)
    	 * for more on the difference between `mouseleave` and `mouseout`.
    	 *
    	 * Defaults to `click` when `trigger` is set to `click`.
    	 */
    	@Input() closeTrigger: "mouseout" | "mouseleave" = "mouseleave";
    	/**
    	 * Placement of the dialog, usually relative to the element the directive is on.
    	 */
    	@Input() placement = "left";
    	/**
    	 * Class to add to the dialog container
    	 */
    	@Input() wrapperClass: string;
    	/**
    	 * Spacing between the dialog and it's triggering element
    	 */
    	@Input() gap = 0;
    	/**
    	 * Deprecated. Defaults to true. Use appendInline to keep dialogs within page flow
    	 * Value `true` appends Dialog to the body (to break out of containers)
    	 */
    	@Input() set appendToBody(v: boolean) {
    		console.log("`appendToBody` has been deprecated. Dialogs now append to the body by default.");
    		console.log("Ensure you have an `ibm-placeholder` in your app.");
    		console.log("Use `appendInline` if you need to position your dialogs within the normal page flow.");
    		this.appendInline = !v;
    	}
    	get appendToBody() {
    		return !this.appendInline;
    	}
    	/**
    	 * Set to `true` to open the dialog next to the triggering component
    	 */
    	@Input() appendInline = false;
    	/**
    	 * Optional data for templates
    	 */
    	@Input() data = {};
    	/**
    	 * Config object passed to the rendered component
    	 */
    	dialogConfig: DialogConfig;
    	/**
    	 * Emits an event when the dialog is closed
    	 */
    	@Output() onClose: EventEmitter<any> = new EventEmitter();
    	/**
    	 * Emits an event when the dialog is opened
    	 */
    	@Output() onOpen: EventEmitter<any> = new EventEmitter();

    	@HostBinding("attr.role") role = "button";
    	@HostBinding("attr.aria-expanded") expanded = false;
    	@HostBinding("attr.aria-haspopup") hasPopup = true;
    	@HostBinding("attr.aria-owns") get ariaOwns(): string {
    		return this.expanded ? this.dialogConfig.compID : null;
    	}

    	/**
    	 * Creates an instance of DialogDirective.
    	 * @param elementRef
    	 * @param viewContainerRef
    	 * @param dialogService
    	 */
    	constructor(
    		protected elementRef: ElementRef,
    		protected viewContainerRef: ViewContainerRef,
    		protected dialogService: DialogService) {}

    	/**
    	 * Overrides 'touchstart' event to trigger a toggle on the Dialog.
    	 */
    	@HostListener("touchstart", ["$event"])
    	onTouchStart(evt) {
    		evt.stopImmediatePropagation();
    		evt.preventDefault();
    		this.toggle();
    	}

    	ngOnChanges() {
    		// set the config object (this can [and should!] be added to in child classes depending on what they need)
    		this.dialogConfig = {
    			title: this.title,
    			content: this.ibmDialog,
    			placement: this.placement,
    			parentRef: this.elementRef,
    			gap: this.gap,
    			trigger: this.trigger,
    			closeTrigger: this.closeTrigger,
    			shouldClose: () => true,
    			appendInline: this.appendInline,
    			wrapperClass: this.wrapperClass,
    			data: this.data
    		};

    		// Run any code a child class may need.
    		this.onDialogChanges();
    	}

    	/**
    	 * Sets the config object and binds events for hovering or clicking before
    	 * running code from child class.
    	 */
    	ngOnInit() {
    		// fix for safari hijacking clicks
    		this.dialogService.singletonClickListen();

    		fromEvent(this.elementRef.nativeElement, "keydown").subscribe((event: KeyboardEvent) => {
    			// "Esc" is an IE specific value
    			if (event.target === this.dialogConfig.parentRef.nativeElement && (event.key === "Tab" || event.key === "Tab" && event.shiftKey) ||
    				event.key === "Escape" || event.key === "Esc") {
    				this.close();
    			}
    		});

    		// bind events for hovering or clicking the host
    		if (this.trigger === "hover" || this.trigger === "mouseenter") {
    			fromEvent(this.elementRef.nativeElement, "mouseenter").subscribe(() => this.open());
    			fromEvent(this.elementRef.nativeElement, this.closeTrigger).subscribe(() => this.close());
    			fromEvent(this.elementRef.nativeElement, "focus").subscribe(() => this.open());
    			fromEvent(this.elementRef.nativeElement, "blur").subscribe(() => this.close());
    		} else {
    			fromEvent(this.elementRef.nativeElement, "click").subscribe(() => this.toggle());
    			fromEvent(this.elementRef.nativeElement, "keydown").subscribe((event: KeyboardEvent) => {
    				// "Spacebar" is an IE specific value
    				if (event.key === "Enter" || event.key === " " || event.key === "Spacebar") {
    					setTimeout(() => {
    						this.open();
    					});
    				}
    			});
    		}

    		// call onClose when the dialog is closed
    		// - Enforce accessibility by updating an aria attr for nativeElement.
    		this.dialogService.isClosed.subscribe(value => {
    			if (value) {
    				this.onClose.emit();
    				this.expanded = false;
    			}
    		});

    		DialogDirective.dialogCounter++;
    		this.dialogConfig.compID = "dialog-" + DialogDirective.dialogCounter;

    		// run any code a child class may need
    		this.onDialogInit();
    	}

    	/**
    	 * When the host dies, kill the popover.
    	 * - Useful for use in a modal or similar.
    	 */
    	ngOnDestroy() {
    		this.close();
    	}

    	/**
    	 * Helper method to call dialogService 'open'.
    	 * - Enforce accessibility by updating an aria attr for nativeElement.
    	 */
    	open() {
    		this.dialogService.open(this.viewContainerRef, this.dialogConfig);
    		this.expanded = true;
    		this.onOpen.emit();
    	}

    	/**
    	 * Helper method to call dialogService 'toggle'.
    	 * - Enforce accessibility by updating an aria attr for nativeElement.
    	 */
    	toggle() {
    		this.expanded = !this.expanded;
    		if (this.expanded) {
    			this.onOpen.emit();
    			this.open();
    		} else {
    			this.close();
    		}
    	}

    	/**
    	 * Helper method to call dialogService 'close'.
    	 * - Enforce accessibility by updating an aria attr for nativeElement.
    	 */
    	close() {
    		this.dialogService.close(this.viewContainerRef);
    		this.expanded = false;
    	}

    	/**
    	 * Empty method for child classes to override and specify additional init steps.
    	 * Run after DialogDirective completes it's ngOnInit.
    	 */
    	protected onDialogInit() {}

    	/**
    	 * Empty method for child to override and specify additional on changes steps.
    	 * run after DialogDirective completes it's ngOnChanges.
    	 */
    	protected onDialogChanges() {}
    }

# result-matching ""

# No results matching ""