Parameter in to Animation Angular2

by

Now it’s possible.

animations: [
    trigger('flyInOut', [

        state('for', style({
            left: '{{left_indent}}', // use interpolation
        }), {params: {left_indent: 0}}), // default parameters values required

        transition('* => for', [
            animate(2000, keyframes([
                style({ opacity: 1, transform: 'translateX(0)', offset: 0 }),
                style({ opacity: 1, transform: 'translateX(-300px)', offset: 0.5 }),
            ]))
        ]),
    ])
]

UPDATE (according to SplitterAlex answer):

in template (for Angular < 4.4.6):

<div [@flyInOut]="{value: triggerValue, left_indent: left_indent}"></div>

for Angular >= 4.4.6 template should be

<div [@flyInOut]="{value: triggerValue, params: {left_indent: left_indent}}"></div>

More Related Contents:

  1. Angular 2 “slide in animation” of a routed component
  2. What is the proper use of an EventEmitter?
  3. Could not find module “@angular-devkit/build-angular”
  4. Angular2 multiple router-outlet in the same template
  5. Angular how to get the multiple checkbox values?
  6. No ‘Access-Control-Allow-Origin’ header in Angular 2 app
  7. Angular 2 Component Constructor Vs OnInit [duplicate]
  8. What is the difference between production and development mode in Angular2?
  9. Queries scale with the size of your result set, not the size of your data set
  10. Angular2: how bind to select multiple
  11. Angular subscribe elegant
  12. Angularjs2 – preload server configuration before the application starts [duplicate]
  13. How to allow access outside localhost
  14. How to get param from url in angular 4?
  15. How to check if Angular application running in Production or Development mode
  16. Best method to set different layout for different pages in angular 4
  17. Mocking Child Components – Angular 2
  18. Rxjs Retry with Delay function
  19. What is the meaning of question mark in expressions in Angular 2?
  20. How to solve the circular dependency
  21. tap() isn’t triggered in RXJS Pipe
  22. Class is using Angular features but is not decorated. Please add an explicit Angular decorator
  23. How to validate white spaces/empty spaces? [Angular 2]
  24. Style html,body from web component (Angular 2)
  25. Angular Mat Select Multiple selectionchange finding which option was changed
  26. Call a function every 10 seconds Angular2
  27. Angular 4: “Cannot find name ‘require’
  28. How to send 1000 XHTTP Requests with maximum number of parallel requests
  29. `[(ngModel)]` vs `[(value)]`
  30. Angular Material2 theming – how to set app background?

Leave a Comment