Get angular 2 animations from a service

Question

I'm beginner with angular 2 animations, and angular 2 by the way.

Actually I'm a bit confused because I cannot see anything about how to put all my animations into a single service, in order to reuse it through my components.

As far as I know, animations are defined inside the @component. This makes me put it in all my components.

I fallow this article which uses a "factory" :

import {trigger, state, animate, style, transition} from '@angular/core';

export function routerTransition() {
  return slideToLeft();
}

function slideToLeft() {
  return trigger('routerTransition', [
    state('void', style({position:'fixed', width:'100%'}) ),
    state('*', style({position:'fixed', width:'100%'}) ),
    transition(':enter', [  // before 2.1: transition('void => *', [
      style({transform: 'translateX(100%)'}),
      animate('0.5s ease-in-out', style({transform: 'translateX(0%)'}))
    ]),
    transition(':leave', [  // before 2.1: transition('* => void', [
      style({transform: 'translateX(0%)'}),
      animate('0.5s ease-in-out', style({transform: 'translateX(-100%)'}))
    ])
  ]);
}

But in there is no @Injectable(). Could any one give me an example of a true service I could put my animations in, then inject it in my components ? Of course, this works, but I'd rather like to do it the Google way if it's possible, if there is a Google way to do it.

Thanks

Possible duplicate of [How do you create reusable Animations in Angular 2](https://stackoverflow.com/questions/39463360/how-do-you-create-reusable-animations-in-angular-2) — Neil Lunn, Jul 16 '17 at 07:41

score 1 · Answer 1 · answered Mar 08 '18 at 16:48

A service shouldn't be responsible for displaying alerts/loading/ or any component that needs to be activated by the NavController. A service should just be for getting and returning data.

If you are using Angular 2.3 and above you can inherit the component. This will let you reuse code easier. My advice would be to create a base component that you can inherit from to get animations.

You can also inherit an abstract class if you don't wish to inherit things like:

lifecycles hooks

See link for more info about extending a component

Get angular 2 animations from a service

1 Answers1