How do you create reusable Animations in Angular 2 -

i'm playing animation api, , i'd create reusable animation sliding in content top level router views. managed through funky meta data syntax (which pretty cool once past crazy idea of using metadata) animations working.

   @component({       //moduleid: module.id,       selector: 'album-display',       templateurl: './albumdisplay.html',       animations: [         trigger('slidein', [           state('*', style({             transform: 'translatex(100%)',           })),           state('in', style({             transform: 'translatex(0)',           })),           state('out',   style({             transform: 'translatex(-100%)',           })),           transition('* => in', animate('600ms ease-in')),           transition('in => out', animate('600ms ease-in'))         ])       ]   })   export class albumdisplay implements oninit {       slideinstate = 'in';       ...   } 

and assigning top level element in component:

  <div  class="container" [@slidein]="slideinstate"> 

so works, how can make reusable? don't want stick meta data onto every view. since metadata i'm not sure how make reusable.

one possible way put animation trigger code in separate file , export const variable , use in component below.

animations.ts

import { trigger, state, style, transition, animate } '@angular/core';  export const slidein = trigger('slidein', [   state('*', style({     transform: 'translatex(100%)',   })),   state('in', style({     transform: 'translatex(0)',   })),   state('out',   style({     transform: 'translatex(-100%)',   })),   transition('* => in', animate('600ms ease-in')),   transition('in => out', animate('600ms ease-in')) ]); 

album-display.component.ts

import { slidein } './animations'; // path animations.ts file  @component({     //moduleid: module.id,     selector: 'album-display',     templateurl: './albumdisplay.html',     animations: [       slidein     ] }) export class albumdisplay implements oninit {     slideinstate = 'in';     ... }