title: Pass custom animations to Component
body: <p>I made an Angular npm library with Angular animations in a Component, but users want to customize them.</p>
  
  <p>Let's say I have the following Angular 5+ component (<a href="https://angular.io/guide/animations" rel="nofollow noreferrer">from Angular docs</a>):</p>
  
  <pre><code>@Component({
    selector: 'app-hero',
    template: `
      template code here...
    `,
    styleUrls: ['./hero-list.component.css'],
    animations: [
      trigger('heroState', [
        state('inactive', style({
          backgroundColor: '#eee',
          transform: 'scale(1)'
        })),
        state('active',   style({
          backgroundColor: '#cfd8dc',
          transform: 'scale(1.1)'
        })),
        transition('inactive =&gt; active', animate('100ms ease-in')),
        transition('active =&gt; inactive', animate('100ms ease-out'))
      ])
    ]
  })
  export class HeroListBasicComponent {
     @Input() heroes: Hero[];
  }
  </code></pre>
  
  <p>As the above example shows, <code>animations</code> are set inside the <code>@Component</code> decorator.</p>
  
  <p>I would like to know if it's possible to pass custom <code>animations</code> array to the element in order to make it using different animations depending on the one passed to the element instance (regardless of how to achieve that):</p>
  
  <ul>
  <li>Custom service?</li>
  <li>@Input()?</li>
  <li>Global config script / variable / object?</li>
  </ul>
  
  <p>Maybe it's not currently possible with actual Angular?</p>