Image slider indicators with angular 2 animations -
i trying create slider items have temporary service in angular 2 testing animation module. using code base of this example. s in items.component.ts have following code:
my item model
import { component, oninit, animate, changedetectorref, style, transition, trigger } '@angular/core'; interface item { id: number; title: string; description: string; } component
type orientation = ( "prev" | "next" | "none" ); @component({ selector: 'app-item-01', animations: [ trigger( "itemanimation", [ transition( "void => prev", // ---> entering ---> [ style({ left: -100, opacity: 0.0, zindex: 2 }), animate( "200ms ease-in-out", style({ left: 0, opacity: 1.0, zindex: 2 }) ) ] ), transition( "prev => void", // ---> leaving ---> [ animate( "200ms ease-in-out", style({ left: 100, opacity: 0.0 }) ) ] ), transition( "void => next", // <--- entering <--- [ // in order maintain zindex of 2 throughout entire // animation (but not after animation), have define // in both initial , target styles. unfortunately, // means have define target values rest // of styles, wouldn't have to. style({ left: 100, opacity: 0.0, zindex: 2 }), animate( "200ms ease-in-out", style({ left: 0, opacity: 1.0, zindex: 2 }) ) ] ), transition( "next => void", // <--- leaving <--- [ animate( "200ms ease-in-out", style({ left: -100, opacity: 0.0 }) ) ] ) ] ) ], templateurl: './item-01.component.html', styleurls: ['./item-01.component.scss'] }) export class item01component implements oninit { public orientation: orientation; public selecteditem: item; private changedetectorref: changedetectorref; private items: item[]; constructor(changedetectorref: changedetectorref) { this.changedetectorref = changedetectorref; this.orientation = "none"; set collection of items
this.items = [ { id: 1, title: "item 1", description: "item 1 description" }, { id: 2, title: "item 2", description: "item 2 description" }, { id: 3, title: "item 3", description: "item 3 description" }, { id: 4, title: "item 4", description: "item 4 description" } ]; randomly select initial item display.
this.selecteditem = this.items[ math.floor( math.random() * this.items.length ) ]; } go next item in collection.
public shownextitem() : void { this.changedetectorref.detectchanges(); find selected index.
var index = this.items.indexof( this.selecteditem ); move rendered element next index - cause current item enter ( "next" => "void" ) transition , new item enter the( "void" => "next" ) transition.
this.selecteditem = this.items[ index + 1 ] ? this.items[ index + 1 ] : this.items[ 0 ] ; } go previous item in collection.
public showprevitem() : void { change "state" our animation trigger.
this.orientation = "prev"; force template apply new animation state before change rendered element view-model. if don't force change-detection, new [@orientation] state won't applied prior "leave" transition;which means won't leaving "expected" state.
this.changedetectorref.detectchanges(); find selected index.
var index = this.items.indexof( this.selecteditem ); ** move rendered element previous index - cause current item enter ( "prev" => "void" ) transition , new item enter ( "void" => "prev" ) transition.**
this.selecteditem = this.items[ index - 1 ] ? this.items[ index - 1 ] : this.items[ this.items.length - 1 ] ; } } template
<p class="controls"> « <a (click)="showprevitem()">previous item</a> — <a (click)="shownextitem()">next item</a> » </p> <div class="container"> <template ngfor let-item [ngforof]="[ selecteditem ]"> <ol class="item-indicators text" [hidden]="items.length <= 1"> <li *ngfor="let item of items" [class.active]="selecteditem === true" (click)="select(item)">{{item.id}} </li> </ol> <div [@itemanimation]="orientation" class="item"> <div class="name"> {{ item.title }} </div> <div class="avatar"></div> <div class="meta"> {{ item.description }} </div> </div> </template> </div> the slider seems working fine, normal carousel want able add indicators animate when corresponding item on display, these need synched detectchanges() method , selecteditem applies class of active (eventually animation) li element if corresponds selecteditem bring . unable following code prints items's id's without relating them selecteditem.
<ol class="item-indicators text" [hidden]="items.length <= 1"> <li *ngfor="let item of items" [class.active]="selecteditem === true" (click)="triggerselectedbundle()">{{item.id}} </li> i need activate selectedbundle matches "active" <li> item above when clicked along lines of :
triggerselectedbundle() { this.selectedbundle = this.bundles.indexof( this.bundle); } however, don't know how implement function above existing code. help?
Comments
Post a Comment