Animations in Angular 4

Animations with Angular

Typing this as a reminder on how to do certain animations with Angular4. Because I'll forget by next week.

Steps:

0. Prerequisits - BrowserAnimationsModule into the main app module
1. Define animations - `export const myAnimation = trigger(':nameOfAnimation', [ <list of transitions or states> ]);
2. Import `myAnimation` into the needed components
3. Bind as attributes, e.g. `[@myAnimation]="stateVariable"`

Specifically:

```
// app module
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...
@NgModule({
  imports: [..., BrowserAnimationsModule, ...],
...

// Define animation, say in *shared/animations.ts*
// this can be in component itself

export const myAnimation = trigger('myAnimation', [
    state('closed', style({
        width: '0px',
        transition: '0.5s'
    }),
    state('closed', style({
        width: '0px',
        transition: '0.5s'
    })];
    
// Third - import this into a component, and put into @Component/@Directive annotation:
import { menuAnimation } from '../shared/animations';
@Component({
  ...
  animations: [myAnimation]
})
export const MyComponent {
  ...
  // initialize the state
  animationState: string = 'closed'; // always has to be a string, even if you wanna simple boolean
  ..
  // change the state somehow
  someTrigger() {   
    this.animationState = 'open'; // or flip between the states or whatever.
  }
}

// markup
<div class="my-componment">
    <!-- Either add it simply as: <div @myAnimation></div>
         Or bind to a variable for state stuff as <div [@myAnimation]="someComponentVariable"></div> -->
    <div class="my-animated-div" [@myAnimation]="animationState">
      ...
    </div>
</div>
```