Refactoring router transitions

router-transitions-util.md

Refactoring multiple router transitions - Angular (v5+)

We can apply this refactor when we identify a group of transitions running the same animation following the same pattern.

Code:

// BEFORE
export const routerTransition = trigger('routerTransition', [
  transition('* => about-intro', childAnimation),
  transition('* => about-team', childAnimation),
  transition('* => about-contact', childAnimation),
  transition('* => about', topLevelAnimation)
]);

// AFTER
const toStateStartsWith = (pattern: string) => (fromState: string, toState: string): boolean 
  => (pattern && !!toState && toState.toLowerCase().startsWith(pattern));

export const routerTransition = trigger('routerTransition', [
  transition(toStateStartsWith('about-'), childAnimation),
  transition('* => about', topLevelAnimation)
]);

More:

• Blogpost: Angular — Supercharge your Router transitions using animations