### File

`src/modal/alert-modal.component.ts`

### Description

Component to create standard modals for presenting content or asking for user's input. It can show as a passive modal showing only text or show as a transactional modal with multiple buttons for different actions for the user to choose from.

Using a modal in your application requires `ibm-modal-placeholder` which would generally be placed near the end of your app component template (app.component.ts or app.component.html) as:

     * <ibm-modal-placeholder></ibm-modal-placeholder>
     *

Example of opening the modal:

     * \@Component({
     *  selector: "app-modal-demo",
     *  template: `
       <button class="btn--primary" (click)="openModal()">Open modal</button>
       <ibm-modal-placeholder></ibm-modal-placeholder>`
     * })
     * export class ModalDemo {
     *     openModal() {
     *         this.modalService.show({
     *            modalType: "default",
     *            modalLabel: "optional header text",
     *            modalTitle: "Modal modalTitle",
     *            text: "Modal text",
     *            buttons: [{
     *                text: "Button text",
     *                type: "primary",
     *                click: clickFunction
     *            }]
     *        });
     *     }
     * }
     *

### Extends

`BaseModal`

### Implements

`AfterViewInit`

### Metadata

selector | `ibm-alert-modal`
template |
    <ibm-modal
    	[size]="size"
    	[theme]="modalType"
    	[modalLabel]="modalTitle"
    	(overlaySelected)="dismissModal('overlay')">
    	<ibm-modal-header (closeSelect)="dismissModal('close')">
    		<p class="bx--modal-header__label bx--type-delta">{{modalLabel}}</p>
        			<p class="bx--modal-header__heading bx--type-beta">{{modalTitle}}</p>
    	</ibm-modal-header>
    	<div #content class="bx--modal-content">
    		<p [innerHTML]="modalContent"></p>
    	</div>
    	<ibm-modal-footer *ngIf="buttons.length > 0">
    		<ng-container *ngFor="let button of buttons; let i = index">
    			<button
    				[ibmButton]="button.type"
    				(click)="buttonClicked(i)"
    				[id]="button.id"
    				[attr.modal-primary-focus]="(button.type.indexOf('primary') !== -1 ? '' : null)">
    				{{button.text}}
    			</button>
    		</ng-container>
    	</ibm-modal-footer>
    </ibm-modal>

### Index

###### Properties
Public buttons content Public modalContent Public modalLabel Public modalTitle Public modalType Public onClose Public size
###### Methods
buttonClicked dismissModal ngAfterViewInit closeModal
###### Outputs
close

### Constructor

`constructor(modalType: string, modalLabel: string, modalTitle: string, modalContent: string, size: string, buttons: [], onClose: Function)`
Defined in src/modal/alert-modal.component.ts:77
Creates an instance of `AlertModal`. Parameters :
Name | Type | Optional
modalType | `string` | No
modalLabel | `string` | No
modalTitle | `string` | No
modalContent | `string` | No
size | `string` | No
buttons | `[]` | No
onClose | `Function` | No

### Outputs

`close` | `$event` Type: `EventEmitter`
Inherited from `BaseModal`
Defined in BaseModal:9

### Methods

buttonClicked
`buttonClicked(buttonIndex)`
Defined in src/modal/alert-modal.component.ts:112
Parameters :
Name | Optional
buttonIndex | No
Returns : `void`

dismissModal
`dismissModal(trigger)`
Defined in src/modal/alert-modal.component.ts:121
Parameters :
Name | Optional
trigger | No
Returns : `void`

ngAfterViewInit
`ngAfterViewInit()`
Defined in src/modal/alert-modal.component.ts:102
Returns : `boolean`

closeModal
`closeModal()`
Inherited from `BaseModal`
Defined in BaseModal:10
Returns : `void`

### Properties

Public buttons
`buttons: `[]``
Type : `[]`
Default value : `[]`
Decorators : `@Inject('buttons')`
Defined in src/modal/alert-modal.component.ts:87

content
`content: ```
Decorators : `@ViewChild('content')`
Defined in src/modal/alert-modal.component.ts:77

Public modalContent
`modalContent: `string``
Type : `string`
Decorators : `@Inject('modalContent')`
Defined in src/modal/alert-modal.component.ts:85

Public modalLabel
`modalLabel: `string``
Type : `string`
Decorators : `@Inject('modalLabel')`
Defined in src/modal/alert-modal.component.ts:83

Public modalTitle
`modalTitle: `string``
Type : `string`
Decorators : `@Inject('modalTitle')`
Defined in src/modal/alert-modal.component.ts:84

Public modalType
`modalType: `string``
Type : `string`
Default value : `"default"`
Decorators : `@Inject('modalType')`
Defined in src/modal/alert-modal.component.ts:82

Public onClose
`onClose: `Function``
Type : `Function`
Decorators : `@Inject('close')`
Defined in src/modal/alert-modal.component.ts:88

Public size
`size: `string``
Type : `string`
Decorators : `@Inject('size')`
Defined in src/modal/alert-modal.component.ts:86

    import {
    	Component,
    	Inject,
    	ViewChild,
    	AfterViewInit
    } from "@angular/core";
    import { BaseModal } from "./base-modal.class";

    /**
     * Component to create standard modals for presenting content or asking for user's input.
     * It can show as a passive modal showing only text or show as a transactional modal with
     * multiple buttons for different actions for the user to choose from.
     *
     * Using a modal in your application requires `ibm-modal-placeholder` which would generally be
     * placed near the end of your app component template (app.component.ts or app.component.html) as:
     *
     * ```html
     * <ibm-modal-placeholder></ibm-modal-placeholder>
     * ```
     *
     * Example of opening the modal:
     *
     * ```typescript
     * \@Component({
     *  selector: "app-modal-demo",
     *  template: `
     *   <button class="btn--primary" (click)="openModal()">Open modal</button>
     *   <ibm-modal-placeholder></ibm-modal-placeholder>`
     * })
     * export class ModalDemo {
     * 	openModal() {
     * 		this.modalService.show({
     *			modalType: "default",
     *			modalLabel: "optional header text",
     *			modalTitle: "Modal modalTitle",
     *			text: "Modal text",
     *			buttons: [{
     *				text: "Button text",
     *				type: "primary",
     *				click: clickFunction
     *			}]
     *		});
     * 	}
     * }
     * ```
     */
    @Component({
    	selector: "ibm-alert-modal",
    	template: `
    		<ibm-modal
    			[size]="size"
    			[theme]="modalType"
    			[modalLabel]="modalTitle"
    			(overlaySelected)="dismissModal('overlay')">
    			<ibm-modal-header (closeSelect)="dismissModal('close')">
    				<p class="bx--modal-header__label bx--type-delta">{{modalLabel}}</p>
          			<p class="bx--modal-header__heading bx--type-beta">{{modalTitle}}</p>
    			</ibm-modal-header>
    			<div #content class="bx--modal-content">
    				<p [innerHTML]="modalContent"></p>
    			</div>
    			<ibm-modal-footer *ngIf="buttons.length > 0">
    				<ng-container *ngFor="let button of buttons; let i = index">
    					<button
    						[ibmButton]="button.type"
    						(click)="buttonClicked(i)"
    						[id]="button.id"
    						[attr.modal-primary-focus]="(button.type.indexOf('primary') !== -1 ? '' : null)">
    						{{button.text}}
    					</button>
    				</ng-container>
    			</ibm-modal-footer>
    		</ibm-modal>
    	`
    })
    export class AlertModal extends BaseModal implements AfterViewInit {
    	@ViewChild("content") content;
    	/**
    	 * Creates an instance of `AlertModal`.
    	 */
    	constructor(
    		@Inject("modalType") public modalType = "default",
    		@Inject("modalLabel") public modalLabel: string,
    		@Inject("modalTitle") public modalTitle: string,
    		@Inject("modalContent") public modalContent: string,
    		@Inject("size") public size: string,
    		@Inject("buttons") public buttons = [],
    		@Inject("close") public onClose: Function
    	) {
    		super();
    		for (let i = 0; i < this.buttons.length; i++) {
    			const button = this.buttons[i];
    			if (!button.id) {
    				button.id = `alert-modal-button-${i}`;
    			}
    			if (!button.type) {
    				button.type = "secondary";
    			}
    		}
    	}

    	ngAfterViewInit() {
    		if (!this.content) { return false; }
    		const element = this.content.nativeElement;
    		if (element.scrollHeight > element.clientHeight) {
    			element.tabIndex = 0;
    		} else {
    			element.tabIndex = -1;
    		}
    	}

    	buttonClicked(buttonIndex) {
    		const button = this.buttons[buttonIndex];
    		if (button.click) {
    			button.click();
    		}

    		this.closeModal();
    	}

    	dismissModal(trigger) {
    		if (this.onClose && this.onClose(trigger) === false) {
    			return;
    		}
    		this.closeModal();
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""