2

I have a simple angular (8+) application using @angular/router with multiple components as routes, and each component use @angular/animations for transitions.

<router-outlet> directive is fullscreen using css width: 100vw and height: 100vh to override default scroll. My idea is to wrap each route with a <div> or a specific class which will allow to define fixed layout.

My current version works great, but I have to manually add the <div> and was hoping to find an automatic solution like @angular/animations does.

app.ts with main router

  <main [@routerTransition]="getState(o)">
    <router-outlet #o="outlet"></router-outlet>
  </main>

Route component html template

<div class="route"> <!--  class which should be automatically wrapped -->
  <div class="container">
    <h1>title</h1>
    <p>Blablabla</p>
  </div>
</div>

Routes

// State is use to bind animation
export const appRoutes: Routes = [
  {
    path: 'page1',
    loadChildren: () => import('./page1/page1.module').then(mod => mod.Page1Module),
    data: { theme: 'light' }
  },
  {
    path: 'page2',
    loadChildren: () => import('./page2/page2.module').then(mod => mod.Page2Module),
    data: { theme: 'light' }
  },
  ...
];

Like I said, this code works exactly as expectied, but having to maintain manually a certain DOM layout is not good enough.

sebastienbarbier
  • 6,542
  • 3
  • 29
  • 55

1 Answers1

2

Content projection will do the job. Basically you have a shell/wrapper component. And all your individual route component will project their content into this shell/wrapper.

RouteShellComponent:

<div class="route">
    <ng-content></ng-content>
</div>

RouteAComponent:

<div class="container">
    <h1>title</h1>
    <div>...</div>
</div>

main

<app-route-shell>
    <router-outlet></router-outlet>
</app-route-shell>
Antediluvian
  • 653
  • 1
  • 6
  • 18
  • It seams like this will generate something like `
    ` ... from my understanding `` add pages as Sibling the itself so I would need `
    `. Might be confuse about **Content projection** may be ...     – sebastienbarbier Oct 24 '19 at 03:57
  • The position doesn't really matter. is only an anchor element which doesn't impact the html structure. – Antediluvian Oct 24 '19 at 04:20
  • When inspecting my dom, I can see all routes are display after , so if I have two routes doing a transition, I will have in my DOM: ` < Route 1/>`. What I need it `
    < Route 1/>
    ` . Sorry, my question was maybe not very clean.     – sebastienbarbier Oct 24 '19 at 04:37
  • 1
    If that is the case I would tend to make the `
    ` a route, and in turn it routes to each individual component with the title. This is not a great idea tho. lol.
     – Antediluvian Oct 24 '19 at 04:47