Repository navigation
[Feat] Investigate changing route component to a structural directive #37
Description
Currently we use a route component to define a route.
<route path="/">
<my-component *routeComponent></my-component>
</route>- This has an easy mental model for registering a route
- Provides an easy way to pass route params as inputs.
- Provides a placeholder for rendering lazy loaded components
<route path="/" #myComponenRoute>
<my-component *routeComponent [params>="myComponentRoute.routeParams$ | async"></my-component>
</route>- Extra DOM elements that have to rendered
- It wraps the actual component, which might make it more difficult to style
- Can't use
display: noneon the route element
This effort would look at potential options to use a structural directive to register the route, and have the route component rendered in its place with no wrapper.
Thoughts
<my-component *route path="/home"></my-component> <ng-template *route path="/lazy" [load]="components.lazy"></ng-template>Reference: https://twitter.com/LayZeeDK/status/1285969664917614592?s=20
Activity
LayZeeDK commentedon Jul 23, 2020
Maybe it could even be a structural directive on the
<router>element level, that is*routerinstead of<router>. This structural would be a responsible for managing the individual routed components.Not sure if this is possible. It would be a more complicated implementation, but it might be an easier developer experience to just apply one structural directive instead of one on each routed component.
meeroslav commentedon Aug 15, 2020
From the ease of development and readability, I would vote for current functionality, over structural directives for router and route.
However, adding structural directives as an option would be great, unless we cripple the implementation by doing so.
I'll give it a go these days and see what comes out of it.
@LayZeeDK, @brandonroberts: what would be the use-case for using
display: noneon route element? It does not render anything meaningful apart from being a wrapper to inner child component.LayZeeDK commentedon Aug 15, 2020
The default for custom elements is
display: inline;, so there is a small cost to adding elements to the DOM, even empty elements. Angular components are hopelessly tied to the DOM. The DOM of a dynamic page gets slower the more visible elements are added because of memory consumption, render, layout, and paint.meeroslav commentedon Aug 15, 2020
In short - DOM rendering performance. I thought there was some specific use case in mind. Thanks for the clarification.