Render instance of a component in Angular?

Question

I've manually created an instance of a class. This class has a @Component decorator. How do I render its template?

@Component({ template: `hello {{ who }}` })
class Greeting {
  constructor (public who: string) { }
}

@Component({ template: `<ng-somehow-render [instance]="greeting"/>` })
class OtherComponent {

  public greeting: Greeting

  constructor () {
    this.greeting = new Greeting('world')
  }

}

ComponentFactoryResolver will give me an instance of the component. I already have the instance and I want to render it.
ngComponentOutlet will internally create the instance. My instance is then useless.

What are you trying to achieve exactly? You cannot just 'manually' instantiate a component instance without using ComponentFactoryResolver, which will give you not only the instance of the component, but also all related objects, including the hostView, which you need to include it in the DOM. — David
– David, Commented Apr 28, 2020 at 7:52

satanTime · Accepted Answer · 2020-04-28 16:35:10Z

1

+500

Looks like you need a middleware component to render instances of another components.

it could be this one

@Component({
    selector: 'ng-somehow-render',
    template: '',
})
export class NgSomehowRenderComponent implements OnInit {
    @Input() instance: any;

    constructor (
        private cfr: ComponentFactoryResolver,
        private vcr: ViewContainerRef,
        private cdr: ChangeDetectorRef,
    ) {
    }

    public ngOnInit(): void {
        const componentFactory = this.cfr.resolveComponentFactory(this.instance.constructor);

        this.vcr.clear();
        const componentRef = this.vcr.createComponent(componentFactory);
        for (const key of Object.getOwnPropertyNames(this.instance)) {
            componentRef.instance[key] = this.instance[key];
        }
        this.cdr.detectChanges();
    }
}

Simply add its declaration into your modules.

BTW the Greeting component should be declared in your modules in entryComponents.

@NgModule({
  declarations: [AppComponent, Greeting, NgSomehowRenderComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [Greeting]
})

Because Angular will try to solve constructor dependencies you need to add @Optional() decorator there.

@Component({
  template: `hello {{ who }}`
})
export class Greeting {
  constructor(@Optional() public who: string) {}
}

profit.

You can check live demo here: https://codesandbox.io/s/jolly-villani-32m5w?file=/src/app/app.component.ts

All the things from the official doc, so you can use it without problems: https://angular.io/guide/dynamic-component-loader#resolving-components

edited Apr 28, 2020 at 16:35

answered Apr 28, 2020 at 16:25

satanTime

13.7k1 gold badge34 silver badges78 bronze badges

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

2 Comments

Chrillewoodz Over a year ago

Any idea why ng-content isn't preserved? codesandbox.io/s/charming-golick-uonzg

satanTime Over a year ago

I think what you do differs from the original task. You try to rerender a rendered component. Not sure it is possible, because how lifecycle hooks should work then? ngOnInit has been executed already, but to render the component again - we need to execute it again...

Collectives™ on Stack Overflow

Render instance of a component in Angular?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related