### File

`modules/utils/src/dynamic-component.service.ts`

### Description

Provide service to add or remove component dynamically

### Index

###### Properties
factoryResolver rootViewContainer
###### Methods
createComponent insertComponent

### Constructor

`constructor(factoryResolver: )`
Defined in modules/utils/src/dynamic-component.service.ts:44
Parameters :
Name | Optional
factoryResolver | no

### Methods

createComponent
`createComponent(component: any, into?: ViewContainerRef)`
Defined in modules/utils/src/dynamic-component.service.ts:56
returns component reference The reason to seperate `createCompnent` and `insertComponent` is to allow some actions before we insert into a hostView. e.g styling, setting attributes, etc Parameters :
Name | Type | Optional
component | `any` | no
into | `ViewContainerRef` | yes
Returns : `ComponentRef<any>`

insertComponent
`insertComponent(componentRef: ComponentRef)`
Defined in modules/utils/src/dynamic-component.service.ts:66
insert component Parameters :
Name | Type | Optional
componentRef | `ComponentRef<any>` | no
Returns : `Component`

### Properties

factoryResolver
`factoryResolver: `ComponentFactoryResolver``
Type : `ComponentFactoryResolver`
Defined in modules/utils/src/dynamic-component.service.ts:42
used to create a factory from a component class

rootViewContainer
`rootViewContainer: `ViewContainerRef``
Type : `ViewContainerRef`
Defined in modules/utils/src/dynamic-component.service.ts:44
defines where a dynamic components insert into

    import {
      Component,
      ComponentFactoryResolver,
      ComponentRef,
      Inject,
      Injectable,
      ReflectiveInjector,
      ViewContainerRef
    } from '@angular/core';

    /**
     * Provide service to add or remove component dynamically
     */
    @Injectable()
    export class DynamicComponentService {
      /** used to create a factory from a component class */
      factoryResolver: ComponentFactoryResolver;
      /** defines where a dynamic components insert into */
      rootViewContainer: ViewContainerRef;

      constructor(@Inject(ComponentFactoryResolver) factoryResolver) {
        this.factoryResolver = factoryResolver;
      }

      /**
       * returns component reference
       * The reason to seperate `createCompnent` and `insertComponent` is
       * to allow some actions before we insert into a hostView.
       * e.g styling, setting attributes, etc
       */
      createComponent(component: any, into?: ViewContainerRef): ComponentRef<any> {
        this.rootViewContainer = into || this.rootViewContainer;
        const factory = this.factoryResolver.resolveComponentFactory(component);

        return factory.create(this.rootViewContainer.parentInjector);
      }

      /**
       * insert component
       */
      insertComponent(componentRef: ComponentRef<any>): Component {
        const compId = `ngui-dyn-${Math.floor(Math.random() * 10 ** 7) + 10 ** 6}`;
        componentRef.location.nativeElement.setAttribute('id', compId);
        componentRef.instance.id = compId;

        this.rootViewContainer.insert(componentRef.hostView);

        return componentRef.instance;
      }

    }

# results matching ""

# No results matching ""