Skip to content

[Feat] Investigate changing route component to a structural directive #37

@brandonroberts

Description

@brandonroberts

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: none on 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions