Module nested components animation

Question

I would like to add animation to my lazy loaded module routes.

My routes looks like this.

{
  const appRoutes: Routes = [
    { path: '', component: StartComponent, pathMatch: 'full' },
    {
      path: '/',
      component: DefaultComponent,
      child: [{
        { path: 'child', component: ChildComponent },
      }]
    }
  ];
}

In my defaultComponent I have this code:

<div [@routeAnimations]="prepareRoute(outlet)" >
  <router-outlet #outlet="outlet"></router-outlet>
</div>

I want my animation to work between start and child component, but its not working because startComponent is not rendered inside router-outlet. If I add startComponent to the child of DefaultComponent, then it works, but then I have to add a new path to startcomponent in the URL, and I dont want that.

/login => render startComponent /login/child => render child component

Between those routes I would like to do the animation.

Can I manage to do it somehow? Maybe the defaultComponent have the content of the startComponent? and then do the animation between default <=> child?

Thank you for any help.

As I wrote earlier I can add startcomponent to the defaultcomponent child and it will work, since router-outlet will manage that easily.

score 0 · Answer 1 · answered Nov 01 '19 at 08:55

This worked, so StartComponent is rendered without any path in the url. and animation works like it should.

const routes: Routes = [
  {
    path: '',
    component: DefaultComponent,
    children: [
      {
        path: '',
        component: StartComponent,
        data: { animation: 'Start' },
      },
      {
        path: 'failure',
        component: FailureComponent,
        data: { animation: 'Failure' },
      },
    ],
  },
];

Module nested components animation

1 Answers1