### 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<any>, 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<any>)`
Defined in src/placeholder/placeholder.service.ts:36

Parameters :

Name | Type | Optional
component | `ComponentRef<any>` | No

Returns : `void`

hasComponentRef
`hasComponentRef(component: ComponentRef<any>)`
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 ""