### File

`src/modal/overlay.component.ts`

### Description

Component for the overlay object that acts as a backdrop to the `Modal` component.

The main purpose for this component is to be able to handle click events that fall outside the bounds of the `Modal` component.

### Metadata

selector | `ibm-overlay`

template

    <section
    	class="bx--modal bx--modal-tall is-visible"
    	[ngClass]="{'bx--modal--danger': theme === 'danger'}"
    	(click)="overlayClick($event)"
    	#overlay>
    	<ng-content></ng-content>
    </section>

### Index

###### Properties

- overlay

###### Methods

- overlayClick

###### Inputs

- theme

###### Outputs

- overlaySelect

### Inputs

`theme` | Classification of the modal. Type : `"default" | "danger"` Default value : `"default"`
Defined in src/modal/overlay.component.ts:33

### Outputs

`overlaySelect` | To emit the event where the user selects the overlay behind the `Modal`. `$event` Type: `EventEmitter`
Defined in src/modal/overlay.component.ts:37

### Methods

overlayClick
`overlayClick(event)`
Defined in src/modal/overlay.component.ts:46

Handles the user clicking on the `Overlay` which resides outside the `Modal` object.

Parameters :

Name | Optional
event | No

Returns : `void`

### Properties

overlay
`overlay: `ElementRef``
Type : `ElementRef`
Decorators : `@ViewChild('overlay')`
Defined in src/modal/overlay.component.ts:41
Maintains a reference to the view DOM element of the `Overlay`.

    import {
    	Component,
    	Output,
    	EventEmitter,
    	ViewChild,
    	ElementRef,
    	Input
    } from "@angular/core";

    /**
     * Component for the overlay object that acts as a backdrop to the `Modal` component.
     *
     * The main purpose for this component is to be able to handle click events that fall outside
     * the bounds of the `Modal` component.
     */
    @Component({
    	selector: "ibm-overlay",
    	template: `
    		<section
    			class="bx--modal bx--modal-tall is-visible"
    			[ngClass]="{'bx--modal--danger': theme === 'danger'}"
    			(click)="overlayClick($event)"
    			#overlay>
    			<ng-content></ng-content>
    		</section>
    	`
    })
    export class Overlay {
    	/**
    	 * Classification of the modal.
    	 */
    	@Input() theme: "default" | "danger" = "default";
    	/**
    	 * To emit the event where the user selects the overlay behind the `Modal`.
    	 */
    	@Output() overlaySelect = new EventEmitter();
    	/**
    	 * Maintains a reference to the view DOM element of the `Overlay`.
    	 */
    	@ViewChild("overlay") overlay: ElementRef;

    	/**
    	 * Handles the user clicking on the `Overlay` which resides outside the `Modal` object.
    	 */
    	overlayClick(event) {
    		if (event.target !== this.overlay.nativeElement) { return; }
    		event.stopPropagation();
    		this.overlaySelect.emit(event);
    	}

    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""