Dynamic Component Loading in Angular with Inputs

Question

I know that in order to create a component dynamically you can do something like this

let componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);

let viewContainerRef = this.host.viewContainerRef;
viewContainerRef.clear();

let componentRef = viewContainerRef.createComponent(componentFactory);
componentref.instance.data = someData;

ngOnInit is called right after viewContainerRef.createComponent(), which is before the data property is patched through to the component. In my ngOnInit I have logic that needs all properties in advance. How can I pass my props to the component before it is created?

I don't think this is a duplicate because that post addresses passing properties, but does not address passing them before ngOnInit as would be the case with a statically added component (and is what I'm interested in). — flyinghigh
– flyinghigh, Commented Feb 4, 2019 at 4:52
Yes like I pass a bunch of data to this component, and in ngOnInit I want to map it in some way and use it in various parts of the component. — flyinghigh
– flyinghigh, Commented Feb 4, 2019 at 5:08

Chellappan வ · Accepted Answer · 2019-02-04 05:20:21Z

1

ES6 classes brings a new syntax for setters on object properties.

The set syntax binds an object property to a function to be called when there is an attempt to set that property.

Try this

import { Component, Input , OnInit} from '@angular/core';    
@Component({
  selector: 'hello',
  template: `<h1>Hello {{_name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent implements OnInit {
  _name: string;
  @Input() set name(value) {
    //do your logic here
    this._name = value;
    console.log(value);
  }

  ngOnInit() {

  }
}

Example:https://stackblitz.com/edit/angular-dynamic-com-set

answered Feb 4, 2019 at 5:20

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

flyinghigh Over a year ago

This is very useful and interesting. But my template is going to have tons of nulls to deal with after creation, which is a huge hassle. The nice thing about routing to a component is I have all of the params I need at component creation time. Is there a way to sort of mimic this routing with components with dynamic component creation? For example, I use the data that is passed in to make a service call. Of course your answer covers this, but I wonder if there are alternatives.

Chellappan வ Over a year ago

Sorry could not think of any other approach!

flyinghigh Over a year ago

What about using providers?

Chellappan வ Over a year ago

ya great idea Try that!

Collectives™ on Stack Overflow

Dynamic Component Loading in Angular with Inputs

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related