Auto Binding Dynamic Components in Angular
English version
Certainly, you’ve tried using dynamic components in your projects at some point, and have faced the problem of passing data to them. Today we’ll try to solve it.
NgSwitch?…
An article about dynamic forms appeared on the Angular website not so long time ago. Look at their implementation and think about the issues you see here:
Basically, if you have a couple of components, and you know for sure they’ll never ever be changed, then this whole article isn’t for you. Feel free to close this tab and make yourself a cup of green tea.
But what if you had a hundred of those? How would you go about using and maintaining them? Just a reminder: this is an explicit violation of SOLID principles, as any change would require to alter the whole implementation.
Also I’m a fox and I don’t want to NgSwitch.
What Angular provides out of the box
ComponentFactoryResolver is used to create all the dynamic components: it is the very thing that provides the component factory.
NgComponentOutlet directive by the developers of Angular that does all the work. Sadly, you might encounter a few issues while using it, but we’ll discuss those later.
ComponentFactoryResolver
This simple example shows a way of creating and displaying a dynamic component.
We have a method that receives the component’s class, resolves the component factory, creates the component itself and attaches it to the view.
This is the most basic way of creating a dynamic component and displaying it:
Here’s how it might look in an abstract example:
We have to manually create the component, manually fill it with data and not forget to manually destroy it in the end.
Also, note that a dynamic component like this does not have an OnChanges hook.
NgComponentOutlet
Perhaps NgComponentOutlet can solve the issue? (spoiler warning: it can’t)
Its implementation uses the same principle as the one we described earlier when we talked about creating dynamic components.
Cons of NgComponentOutlet
You don’t get access to the component, so you can’t control it.
The data won’t be supplied to the component, i.e. there’s virtually no way to send or receive anything from it. Whatcha gonna do, use an Injector?
There’s no OnChanges hook, so component’s life cycle is incomplete.
Manual management of dynamic components makes the code bulky, complicated, and hard to maintain.
We got tired of this and wrote a directive that relieves this pain and solves the aforementioned problems.
Introducing, NgxComponentOutlet!!! 🎉
Automatic data binding
Which means you’ll never have to worry about passing data to a dynamic component again. Just use it as you would use a regular component.
Complete life cycle
Lets you use already written components that requires it.
Provides access to the whole component
For the reckless control freaks.
Сomparison
Source code on github, demo on stackblitz with heroes, table and form.
What next?
The library is in constant development, so stay tuned for changes in our repository.
In the upcoming articles, we’ll discuss various use cases of dynamic components.
