Efficient Dynamic Forms with ngComponentOutlet in Angular

Angular features ngComponentOutlet, a powerful tool for creating dynamic and flexible applications. It allows developers to seamlessly load and render components, managing dynamic content and interactions while enhancing reusability. In Angular 17, a new input binding for ngComponentOutlet simplifies the process by eliminating the need to manually declare injectors. This article explores the capabilities of ngComponentOutlet and demonstrates how to leverage its features to create dynamic nested form templates in Angular applications.

What is ngComponentOutlet?

ngComponentOutlet is an Angular directive designed to enable dynamic rendering of components based on either a component reference or type. It provides the capability to specify a point within a template where a component should be inserted dynamically. This can be useful in various scenarios:

• Dynamic Component Loading

ngComponentOutlet can load different components based on user actions or application logic without manually managing component instantiations. It allows components to be loaded conditionally based on feature flags or other runtime configurations, providing a seamless user experience without the need for multiple routes or views.

• Conditional Component Rendering

ngComponentOutlet allows you to display different components based on certain conditions or user preferences, making your application more flexible and responsive to user needs. It can render components based on enabled features, user roles, or settings, displaying different UI elements according to user preferences. By using ngComponentOutlet, you can leverage reusable components instead of implementing complex functionality, allowing these components to be used across various parts of the application.

• Enhancing Reusability

By using ngComponentOutlet, we are able to load reusable components dynamically, which is particularly useful for scenarios where the content or behavior needs to change based on context. This approach helps reduce redundancy and improve maintainability.

Benefits of ngComponentOutlet

Using ngComponentOutlet can significantly enhance the development process and application performance. In the following sections, we will explore the key benefits of utilizing ngComponentOutlet in Angular applications, including how it contributes to a faster development cycle, reduced bundle size, improved performance, scalability, and ease of maintenance.

1. Faster Development Cycle

Dynamic Component Loading allows developers to create more adaptable and efficient Angular applications. Additionally, using ngComponentOutlet can help reduce boilerplate code. Developers can minimize the need for repetitive code or conditional component templates, which simplifies the development process. For comparison, we will refer to the same example and examine the scenario without using ngComponentOutlet.

2. Reduced Bundle Size

Components loaded via ngComponentOutlet can be lazily loaded, which means they are only included in the bundle when needed. This helps in reducing the initial bundle size, leading to faster load times and improved performance for users. Dynamic component loading promotes a modular approach to application design, where components are loaded on-demand. This can lead to more efficient use of resources and smaller overall bundle sizes. For Form Group implementation in Halodoc environments, we can reduce the bundle size by approximately 10KB for each component implementation by using ngComponentOutlet.

3. Performance

Using ngComponentOutlet allows Angular to manage component rendering efficiently. Components are only instantiated when required, which can reduce memory usage and improve application performance. By deferring the loading of components that are not immediately needed, developers can improve the initial load time and responsiveness of the application, enhancing the user experience.

4. Scalability

Using ngComponentOutlet supports a modular design approach where components are encapsulated and loaded dynamically. This makes it easier to scale the application by adding new components or features without significantly affecting the existing codebase. Dynamic loading of components allows for more flexible and scalable management of user interfaces and feature sets.

5. Easier Maintenance

Using ngComponentOutlet helps in maintaining a clear separation of concerns. Components can be developed, tested, and maintained independently, making it easier to manage and update individual parts of the application. Changes to dynamic components also do not require changes to the static components or templates. This simplifies maintenance and allows for more straightforward updates and bug fixes.

New Binding Input in ngComponentOutlet Angular 17

Before Angular 17, to use ngComponentOutlet for dynamic components with inputs, developers needed to create an injector to set up the component inputs.

After the Angular 17 upgrade, you can simply pass an inputs object and retrieve the inputs using the @Input decorator in the child component.

How to handle dynamic nested form using ngComponentOutlet?

After the Angular 17 update, we can use ngComponentOutlet along with the new input bindings to handle dynamic nested forms and manage the same formControl within the parent component. We start by creating the child component to be dynamically rendered and declaring the @Input decorator.

In the FreeTextFormComponent, we use the form input to manage placeholder text in the FormGroup, as shown in the example here:

In RadioFormComponent, we use the form input to manage the form and options, as shown in example here:

Next, let's create a conditional mapping for each child component. For example, if the question type is radio, the RadioFormComponent will be rendered. If the question type is free text, the FreeTextFormComponent will be rendered. Both components should have the same @Input decorator to handle dynamic inputs.

We can then use ngComponentOutlet to dynamically render these two components by declaring form and options inputs. The form input will help manage the overall FormControl at the parent level, while options will handle responses for both radio and free text inputs. For example, if the question type is Radio, the radio options will be shown. If the question type is Free Text, the free text input will be displayed. We can easily add another question type to the formQuestionMap and declare the corresponding component. This approach enhances component reusability and simplifies conditional rendering management.

In the end, we will have a nested form that implements both FormArray and FormGroup within the same parent component, as illustrated in the example below:

Conclusion

In conclusion, ngComponentOutlet helps load and render dynamic components for dynamic content, especially in nested forms as part of a complex user interface. This enhances reusability, flexibility, and maintainability within projects. ngComponentOutlet provides a straightforward approach to managing dynamic component rendering. The new input binding in Angular 17 allows us to handle dynamic inputs without needing to declare an injector, facilitating the management of dynamic nested forms within the same parent form.

References

• Angular v17 Documentation ngComponentOutlet

Join us

Scalability, reliability, and maintainability are the three pillars that govern what we build at Halodoc Tech. We are actively looking for engineers at all levels and if solving hard problems with challenging requirements is your forte, please reach out to us with your resumé at careers.india@halodoc.com

About Halodoc

Halodoc is the number 1 all around Healthcare application in Indonesia. Our mission is to simplify and bring quality healthcare across Indonesia, from Sabang to Merauke. We connect 20,000+ doctors with patients in need through our Tele-consultation service. We partner with 3500+ pharmacies in 100+ cities to bring medicine to your doorstep. We've also partnered with Indonesia's largest lab provider to provide lab home services, and to top it off we have recently launched a premium appointment service that partners with 500+ hospitals that allow patients to book a doctor appointment inside our application. We are extremely fortunate to be trusted by our investors, such as the Bill & Melinda Gates Foundation, Singtel, UOB Ventures, Allianz, GoJek, Astra, Temasek, and many more. We recently closed our Series D round and In total have raised around USD$100+ million for our mission. Our team works tirelessly to make sure that we create the best healthcare solution personalized for all of our patient's needs, and are continuously on a path to simplify healthcare for Indonesia.