### File

`src/placeholder/placeholder.service.ts`

### Description

Singleton service used to register the container for out-of-flow components to insert into. Also used to insert/remove components from that view.

### Index

###### Properties
Protected viewContainerRef
###### Methods
appendElement createComponent destroyComponent hasComponentRef hasElement hasPlaceholderRef registerViewContainerRef removeElement

### Methods

appendElement
`appendElement(element: HTMLElement)`
Defined in src/placeholder/placeholder.service.ts:57
Parameters :
Name | Type | Optional
element | `HTMLElement` | No
Returns : `HTMLElement`

createComponent
`createComponent(componentFactory: ComponentFactory, injector: Injector)`
Defined in src/placeholder/placeholder.service.ts:29
Creates and returns component in the view. Parameters :
Name | Type | Optional
componentFactory | `ComponentFactory<any>` | No
injector | `Injector` | No
Returns : `ComponentRef<any>`

destroyComponent
`destroyComponent(component: ComponentRef)`
Defined in src/placeholder/placeholder.service.ts:36
Parameters :
Name | Type | Optional
component | `ComponentRef<any>` | No
Returns : `void`

hasComponentRef
`hasComponentRef(component: ComponentRef)`
Defined in src/placeholder/placeholder.service.ts:46
Parameters :
Name | Type | Optional
component | `ComponentRef<any>` | No
Returns : `boolean`

hasElement
`hasElement(element: HTMLElement)`
Defined in src/placeholder/placeholder.service.ts:65
Parameters :
Name | Type | Optional
element | `HTMLElement` | No
Returns : `boolean`

hasPlaceholderRef
`hasPlaceholderRef()`
Defined in src/placeholder/placeholder.service.ts:53
Returns : `boolean`

registerViewContainerRef
`registerViewContainerRef(vcRef: ViewContainerRef)`
Defined in src/placeholder/placeholder.service.ts:22
Used by `Placeholder` to register view-container reference. Parameters :
Name | Type | Optional
vcRef | `ViewContainerRef` | No
Returns : `void`

removeElement
`removeElement(element: HTMLElement)`
Defined in src/placeholder/placeholder.service.ts:61
Parameters :
Name | Type | Optional
element | `HTMLElement` | No
Returns : `HTMLElement`

### Properties

Protected viewContainerRef
`viewContainerRef: `ViewContainerRef``
Type : `ViewContainerRef`
Default value : `null`
Defined in src/placeholder/placeholder.service.ts:18
Maintain a `ViewContainerRef` to an instance of the component.

    import {
    	ComponentRef,
    	ViewContainerRef,
    	ComponentFactory,
    	Injector
    } from "@angular/core";
    import { Injectable } from "@angular/core";

    /**
     * Singleton service used to register the container for out-of-flow components to insert into.
     * Also used to insert/remove components from that view.
     */
    @Injectable()
    export class PlaceholderService {
    	/**
    	 * Maintain a `ViewContainerRef` to an instance of the component.
    	 */
    	protected viewContainerRef: ViewContainerRef = null;
    	/**
    	 * Used by `Placeholder` to register view-container reference.
    	 */
    	registerViewContainerRef(vcRef: ViewContainerRef): void {
    		this.viewContainerRef = vcRef;
    	}

    	/**
    	 * Creates and returns component in the view.
    	 */
    	createComponent(componentFactory: ComponentFactory<any>, injector: Injector): ComponentRef<any> {
    		if (!this.viewContainerRef) {
    			console.error("No view container defined! Likely due to a missing `ibm-placeholder`");
    		}
    		return this.viewContainerRef.createComponent(componentFactory, null, injector);
    	}

    	destroyComponent(component: ComponentRef<any>) {
    		const index = this.viewContainerRef.indexOf(component.hostView);
    		if (index < 0) {
    			return;
    		}

    		// destroy the view
    		this.viewContainerRef.remove(index);
    	}

    	hasComponentRef(component: ComponentRef<any>) {
    		if (this.viewContainerRef.indexOf(component.hostView) < 0) {
    			return false;
    		}
    		return true;
    	}

    	hasPlaceholderRef() {
    		return !!this.viewContainerRef;
    	}

    	appendElement(element: HTMLElement): HTMLElement {
    		return this.viewContainerRef.element.nativeElement.appendChild(element);
    	}

    	removeElement(element: HTMLElement): HTMLElement {
    		return this.viewContainerRef.element.nativeElement.removeChild(element);
    	}

    	hasElement(element: HTMLElement): boolean {
    		return this.viewContainerRef.element.nativeElement.contains(element);
    	}
    }

# result-matching ""

# No results matching ""