Obtain the ViewContainerRef object from the Component

Question

Obtain the ViewContainerRef object from the Component

Looking to create nested components in Angular 4?

This is the Chooser Component

import {InputComponent} from './input/input.component'
import {BlockComponent} from './block/block.component'

export const FormChooser = {
  Block: BlockComponent,
  Input: InputComponent
}

Here we have the Component Builder

const selectedComponent = FormChooser[data.component]
const componentFactory = this.Resolver.resolveComponentFactory(selectedComponent)

const newlyCreatedComponent = this.ViewContainerRef.createComponent(componentFactory)

Trying to access the ViewContainerRef of new_component? So you can implement code like this

const anotherNewComponent = newlyCreatedComponent.createComponent(componentFactory) // as ViewContainerRef

Thanks in advance...

angular typescript

Answer 1

Answer №1

You have the option to either include ViewContainer in the constructor of a dynamic component:

class CustomComponent {
  constructor(public vcRef: ViewContainerRef) {}
}

const factory = this.Resolver.resolveComponentFactory(CustomComponent)

const newComponentRef = this.ViewContainerRef.createComponent(factory);
const newComponentVcRef = newComponentRef.instance.vcRef;

or utilize @ViewChild to obtain a reference to ViewContainerRef:

 template: '<ng-container #ref></ng-container>'
})
class CustomComponent {
  @ViewChild('ref') vcRef: ViewContainerRef;
}

const factory = this.Resolver.resolveComponentFactory(CustomComponent )

const newComponentRef = this.ViewContainerRef.createComponent(factory);
const newComponentVcRef = newComponentRef.instance.vcRef;

Answer 2

You have the option to either include ViewContainer in the constructor of a dynamic component:

class CustomComponent {
  constructor(public vcRef: ViewContainerRef) {}
}

const factory = this.Resolver.resolveComponentFactory(CustomComponent)

const newComponentRef = this.ViewContainerRef.createComponent(factory);
const newComponentVcRef = newComponentRef.instance.vcRef;

or utilize @ViewChild to obtain a reference to ViewContainerRef:

 template: '<ng-container #ref></ng-container>'
})
class CustomComponent {
  @ViewChild('ref') vcRef: ViewContainerRef;
}

const factory = this.Resolver.resolveComponentFactory(CustomComponent )

const newComponentRef = this.ViewContainerRef.createComponent(factory);
const newComponentVcRef = newComponentRef.instance.vcRef;

Answer 3

Answer №2

Incorporating Angular +8

import { InputNumberComponent } from '../input-number/input-number.component';
@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.scss']
})
export class DynamicFormComponent implements OnInit {

  @ViewChild('ref', { read: ViewContainerRef }) vcRef: ViewContainerRef;
  constructor(private resolver: ComponentFactoryResolver) { }

  ngOnInit() {
    const dynamicComponent = this.resolver.resolveComponentFactory(InputNumberComponent)
    this.vcRef.createComponent(dynamicComponent)
  }

}

Answer 4

Incorporating Angular +8

import { InputNumberComponent } from '../input-number/input-number.component';
@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.scss']
})
export class DynamicFormComponent implements OnInit {

  @ViewChild('ref', { read: ViewContainerRef }) vcRef: ViewContainerRef;
  constructor(private resolver: ComponentFactoryResolver) { }

  ngOnInit() {
    const dynamicComponent = this.resolver.resolveComponentFactory(InputNumberComponent)
    this.vcRef.createComponent(dynamicComponent)
  }

}

Obtain the ViewContainerRef object from the Component

Answer №1

Answer №2

Similar questions

The ngx-translate Angular translation file is being loaded twice unnecessarily

Tips for utilizing an elective conversion by typing

Please optimize this method to decrease its Cognitive Complexity from 21 to the maximum allowed limit of 15. What are some strategies for refactoring and simplifying the

NextJs Route Groups are causing issues as they do not properly exclude themselves from the app's layout.tsx

Send a Date Object through an Event Emitter to be used in a Date Picker

Is Typescript generating error TS2411 within its own Typescript module?

Introducing an extra 'pipe' in rxjs angular may result in generating errors

Angular Kendo dropdownlist and input textbox are not working together as anticipated

Create a custom validation function that accepts additional parameters

I attempted to implement a CSS and Typescript animation for a sliding effect, but unfortunately, it isn't functioning

Is there a way to check for keys in a TypeScript object that I am not familiar with?

When setting up Webpack with TypeScript, an error is encountered related to imports

Organize information by time intervals using JavaScript

The Angular2 Router directs the user to the main Component

When using EmotionJS with TypeScript, the theme type is not properly passed to props when using styled components

What is the method for nesting data within a component's child>child>child structure?

Choosing and Duplicating Text in Angular

Using constant variables as arguments in functions in TypeScript

The issue of process.server being undefined in Nuxt.js modules is causing compatibility problems

Properly configuring paths in react-native for smooth navigation