DEV Community

loading...

Discussion on: Angular 9: Lazy Loading Components

Collapse
coly010 profile image
Colum Ferry

Given that we can lazy load components in their own, where is our use case to do so?

Right now, I feel like it doesn't fit well.

We mount the components to the ViewContainerRef, but do we not lose the ability to style where the lazy component gets mounted.

Take for example a page that contains a login form.

We don't necessarily want that visible until the user clicks a Sign In button on our page. Once we do this, then we lazy load the LoginFormComponent.

But if we're just mounting to a ViewContainerRef, how exactly do we style that the login form should maybe show in an in-line div under the Sign In button the user clicked?

Collapse
john_papa profile image
John Papa Author

Good questions. I planted the seeds of some of these same questions in the last section of this article. Perhaps lazy components can be most helpful when you need to load components dynamically. Which ones should load? Based on user roles? Based on some workflow or profile rules?

The login component you mention could contain its own styles.

Collapse
coly010 profile image
Colum Ferry • Edited

I'll admit I do like the thought of having the ability in the future to dynamically load components based around more complex logic in our TS rather than bloating our HTML with it.

It paves the way for BuilderComponents that can generate views based on what information we pass to it.

Think of taking FormBuilder one step further to FormBuilderComponent where we give it our FormGroup and it renders the appropriate form controls based on the structure of our FormGroup.

My gripe right now is that, yes, our dynamically loaded component can style itself, but it does not currently have the ability to style where it lives/renders in its parent and its parent loses its ability to style where its dynamic children render.

With Content Projection using ng-content, we at least maintain the ability to decide where our children get rendered and how the area surrounded them gets styled.

Thread Thread
layzee profile image
Lars Gyrup Brink Nielsen • Edited

This ASP.NET-style school of thought was part of the original Angular 2 design doc, but features such as FormLayoutComponent never made the final cut, neither did built-in state management and quite a few other features.