cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(animations): change trigger binding syntax to function as a property binding []

Browse Source 
Animation triggers can now be set via template bindings `[]`

BREAKING CHANGE:

animation trigger expressions within the template that are assigned as
an element attribute (e.g. `@prop`) are deprecated. Please use the
Angular2 property binding syntax (e.g. `[@prop]`) when assigning
properties.

```ts
// this is now deprecated
<div @trigger="expression"></div>

// do this instead
<div [@trigger]="expression"></div>
```
This commit is contained in:
Matias Niemelä
2016-07-07 12:13:52 -07:00
parent f1fc1dc669
commit 7f4954bed6
7 changed files with 79 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
modules/@angular/core/src/animation/metadata.ts
View File

@ -520,7 +520,7 @@ export function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSe
*
* ```html
* <!-- somewhere inside of my-component-tpl.html -->
* <div @myAnimationTrigger="myStatusExp">...</div>
* <div [@myAnimationTrigger]="myStatusExp">...</div>
* ```
*
* #### The final `animate` call
@ -569,7 +569,7 @@ export function transition(stateChangeExpr: string, steps: AnimationMetadata | A
* {@link ComponentMetadata#animations-anchor animations section}. An animation trigger can
* be placed on an element within a template by referencing the name of the
* trigger followed by the expression value that the trigger is bound to
* (in the form of `@triggerName="expression"`.
* (in the form of `[@triggerName]="expression"`.
*
* ### Usage
*
@ -601,7 +601,7 @@ export function transition(stateChangeExpr: string, steps: AnimationMetadata | A
*
* ```html
* <!-- somewhere inside of my-component-tpl.html -->
* <div @myAnimationTrigger="myStatusExp">...</div>
* <div [@myAnimationTrigger]="myStatusExp">...</div>
* ```
*
* ### Example ([live demo](http://plnkr.co/edit/Kez8XGWBxWue7qP7nNvF?p=preview))