/**
 *  ngAnimation
 *  reference: http://www.bennadel.com/blog/3139-experimenting-with-conditional-enter-leave-animations-in-angular-2-rc-6.htm
 **/ import { animate } from "@angular/core" ; import { ChangeDetectorRef } from "@angular/core" ; import { Component } from "@angular/core" ; import { style } from "@angular/core" ; import { transition } from "@angular/core" ; import { trigger } from "@angular/core" ; interface Friend { id : number ; name : string ; favoriteMovie : string ; } type Orientation = ( "prev" | "next" | "none" ) ; @ Component ( { selector : "AnimateCards" , styleUrls : [ './AnimateCards.css' ] , animations : [ trigger ( "friendAnimation" , [ transition ( "void => prev" , [ style ( { left : - 100 , opacity : 0.0 , zIndex : 2 } ) , animate ( "200ms ease-in-out" , style ( { left : 0 , opacity : 1.0 , zIndex : 2 } ) ) ] ) , transition ( "prev => void" , [ animate ( "200ms ease-in-out" , style ( { left : 100 , opacity : 0.0 } ) ) ] ) , transition ( "void => next" , [ style ( { left : 100 , opacity : 0.0 , zIndex : 2 } ) , animate ( "200ms ease-in-out" , style ( { left : 0 , opacity : 1.0 , zIndex : 2 } ) ) ] ) , transition ( "next => void" , [ animate ( "200ms ease-in-out" , style ( { left : - 100 , opacity : 0.0 } ) ) ] ) ] ) ] , template : `
		<div class="container">
            <div *ngFor="let friend of selectedFriend">
				<div [@friendAnimation]="orientation" class="friend">

					<div class="name">
						{{ friend.name }}
					</div>
					<div class="avatar"></div>
					<div class="meta">
						ID: {{ friend.id }}
						&mdash;
						Favorite Movie: {{ friend.favoriteMovie }}
					</div>

				</div>
            </div>
		</div>

		<p class="controls">
			&laquo;
			<a (click)="showPrevFriend()">Previous Friend</a>
			&mdash;
			<a (click)="showNextFriend()">Next Friend</a>
			&raquo;
		</p>
	` } ) export class AnimateCards { public orientation : Orientation ; public selectedFriend : Array < Friend > = [ ] ; private changeDetectorRef : ChangeDetectorRef ; private friends : Friend [ ] ; constructor ( changeDetectorRef ) { this . changeDetectorRef = changeDetectorRef ; this . orientation = "none" ; this . friends = [ { id : 1 , name : "Sarah" , favoriteMovie : "Happy Gilmore" } , { id : 2 , name : "Joanna" , favoriteMovie : "Better Than Chocolate" } , { id : 3 , name : "Tricia" , favoriteMovie : "Working Girl" } , { id : 4 , name : "Kim" , favoriteMovie : "Terminator 2" } ] ; this . selectedFriend = [ ] ; this . selectedFriend . push ( this . friends [ Math . floor ( Math . random ( ) * this . friends . length ) ] ) ; } public showNextFriend ( ) { this . orientation = "next" ; this . changeDetectorRef . detectChanges ( ) ; var index = this . friends . indexOf ( this . selectedFriend [ 0 ] ) ; var res = this . friends [ index + 1 ] ? this . friends [ index + 1 ] : this . friends [ 0 ] ; this . selectedFriend = [ ] ; this . selectedFriend . push ( res ) ; } public showPrevFriend ( ) { this . orientation = "prev" ; this . changeDetectorRef . detectChanges ( ) ; var index = this . friends . indexOf ( this . selectedFriend [ 0 ] ) ; var res = this . friends [ index - 1 ] ? this . friends [ index - 1 ] : this . friends [ this . friends . length - 1 ] ; this . selectedFriend = [ ] ; this . selectedFriend . push ( res ) ; } }