Skip to content

Instantly share code, notes, and snippets.

@gsans
Last active April 21, 2018 15:04
Show Gist options
  • Save gsans/05ab617d2827c030ac6e2e34a8e2b358 to your computer and use it in GitHub Desktop.
Save gsans/05ab617d2827c030ac6e2e34a8e2b358 to your computer and use it in GitHub Desktop.
Refactoring router transitions

yummy

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:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment