Pass inputs to ngComponentOutlet in Angular

Loading

Reading Time: 4 minutes Introduction In this blog post, I am going to describe how to use the new syntax to pass inputs to ngComponentOutlet to create dynamic components in Angular. Prior to Angular 1.16.2, Angular allows injector input in ngComponentOutlet to provide values. Developers define injection token and useValue to provide Object/primitive value in providers array. With the … Read more

Customize component using ViewContainerRef and signals in Angular

Loading

Reading Time: 5 minutes Introduction In this blog post, I want to describe how to perform UI customization using ViewContainerRef and Angular signals. Originally, I have a PokemonTabComponent that renders dynamic components using ViewContainerRef and the components are assigned a pokemon input. After rewrite, I refactor these components to inject Pokemon service in order to access the pokemon signal. … Read more

Customize component using ngComponentOutlet and signals in Angular

Loading

Reading Time: 4 minutes Introduction In this blog post, I want to describe how to do UI customization using ngComponentOutlet and Angular signals. Originally, I had a PokemonTabComponent that renders dynamic components using ngComponentOutlet and RxJS. I refactored the component to use signals and the code is surprisingly short, easy to understand and maintain. Moreover, I apply “signals in … Read more

Render dynamic components in Angular using viewContainerRef

Loading

Reading Time: 4 minutes Introduction In Angular, ngComponentOutlet is the simple way to render components dynamically. The other option is to render dynamic components using ViewContainerRef class. ViewContainerRef class has createComponent method that instantiates component and inserts it to a container. It is a powerful technique to add components at runtime; they are not loaded in main bundle to … Read more

Render dynamic components the simple way in Angular – ngComponentOutlet

Loading

Reading Time: 4 minutes Introduction In Angular, there are a few ways to render templates and components dynamically. There is ngTemplateOutlet that can render different instances of ng-template conditionally. When we use components, we can apply ngComponentOutlet to render the dynamic components the simple way or ViewContainerRef the complex way. In this blog post, I created a new component, … Read more

Dynamically load components in Angular 13

Loading

Reading Time: 3 minutes Introduction Dynamically load components has simplified in Angular 13. Angular team deprecated ViewContainerRef in Angular 13 and we can load components to attached view container without it now. Let’s recap how we load components in Angular 12. We inject ComponentFactoryResolver to map component to ComponentFactory. Then, we pass the ComponentFactory to ViewContainerRef to create an … Read more