### File

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

### Description

Deprecated with v2.0, will be removed in v3.0 Using a modal in your application requires this component (`n-modal-placeholder`). It 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>
     *

A more complete example for `Modal` is given as follows:

     * <ibm-modal size="xl" (overlaySelected)="closeModal()">
     *     <ibm-modal-header (closeSelect)="closeModal()">Header text</ibm-modal-header>
     *     <section class="modal-body">
     *         <h1>It Works!</h1>
     *         {{modalText}}
     *     </section>
     *     <ibm-modal-footer><button class="btn cancel-button" (click)="closeModal()">Cancel</button></ibm-modal-footer>
     * </ibm-modal>
     * ...
     * <ibm-modal-placeholder></ibm-modal-placeholder>
     *

### Implements

`OnInit`

### Example

### Metadata

selector | `ibm-modal-placeholder`
template |
    <div #modalplaceholder></div>

### Index

###### Properties
Public placeholderService viewContainerRef
###### Methods
ngOnInit

### Constructor

`constructor(placeholderService: PlaceholderService)`
Defined in src/modal/modal-placeholder.component.ts:46
Creates an instance of `ModalPlaceholder`. Parameters :
Name | Type | Optional
placeholderService | `PlaceholderService` | No

### Methods

ngOnInit
`ngOnInit()`
Defined in src/modal/modal-placeholder.component.ts:56
Initializes the component using `ModalService`. Returns : `void`

### Properties

Public placeholderService
`placeholderService: `PlaceholderService``
Type : `PlaceholderService`
Defined in src/modal/modal-placeholder.component.ts:51

viewContainerRef
`viewContainerRef: `ViewContainerRef``
Type : `ViewContainerRef`
Decorators : `@ViewChild('modalplaceholder', {read: ViewContainerRef})`
Defined in src/modal/modal-placeholder.component.ts:46
Maintains a reference to the view DOM element of the `ModalPlaceholder`.

    import {
    	Component,
    	OnInit,
    	ViewContainerRef,
    	ViewChild
    } from "@angular/core";
    import { PlaceholderService } from "./../placeholder/placeholder.service";

    /**
     * Deprecated with v2.0, will be removed in v3.0
     * Using a modal in your application requires *this* component (`n-modal-placeholder`).
     * It 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>
     * ```
     *
     * A more complete example for `Modal` is given as follows:
     *
     * ```html
     * <ibm-modal size="xl" (overlaySelected)="closeModal()">
     * 	<ibm-modal-header (closeSelect)="closeModal()">Header text</ibm-modal-header>
     * 	<section class="modal-body">
     * 		<h1>It Works!</h1>
     * 		{{modalText}}
     * 	</section>
     * 	<ibm-modal-footer><button class="btn cancel-button" (click)="closeModal()">Cancel</button></ibm-modal-footer>
     * </ibm-modal>
     * ...
     * <ibm-modal-placeholder></ibm-modal-placeholder>
     * ```
     *
     * @deprecated
     */
    @Component({
    	selector: "ibm-modal-placeholder",
    	template: `<div #modalplaceholder></div>`
    })
    export class ModalPlaceholder implements OnInit {
    	/**
    	 * Maintains a reference to the view DOM element of the `ModalPlaceholder`.
    	 */
    	@ViewChild("modalplaceholder", {read: ViewContainerRef }) viewContainerRef: ViewContainerRef;

    	/**
    	 * Creates an instance of `ModalPlaceholder`.
    	 */
    	constructor(public placeholderService: PlaceholderService) {}

    	/**
    	 * Initializes the component using `ModalService`.
    	 */
    	ngOnInit() {
    		console.warn("`ibm-modal-placeholder` has been deprecated in favour of `ibm-placeholder`");
    		this.placeholderService.registerViewContainerRef(this.viewContainerRef);
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""