Hello, I'm currently building an app in Angular2, with this homescreen:
<https://i.imgur.com/W19NJtk.jpg> <div id="freewall" class="free-wall" data-min-width="1840" data-total-col="5" data-total-row="4" data-wall-width="1873" data-wall-height="800" style="position: relative; height: 800px;"> <div *ngFor="let block of blokken | async" [@animState]="block.state" (click)="block.toggleState()" [ngClass]='block.color' class='blockexnr{{block.id}} live-tile cell tile2' data-mode='slide' style.height="{{block.height}}px" style.width="{{block.width}}px" style='display: none;'> <div> <p class='full' href='#' class="blocknr{{block.id}}">{{block.tekst1}}</p> </div> <div data-mode='carousel' data-start-now='true' class='title2 live-tile' data-direction='horizontal' data-delay='3000'> <div class="blocknr{{block.id}}"> <p>{{block.textCar[0]}}</p> <img class='products' src='{{block.imgCar[0]}}' /> </div> <div *ngIf="block.amountCar > 1" class="blocknr{{block.id}}"> <p>{{block.textCar[1]}}</p> <img class='products' src='{{block.imgCar[0]}}' /> </div> <div *ngIf="block.amountCar > 2" class="blocknr{{block.id}}"> <p>{{block.textCar[2]}}</p> <img class='products' src='{{block.imgCar[0]}}' /> </div> <div *ngIf="block.amountCar > 3" class="blocknr{{block.id}}"> <p>{{block.textCar[3]}}</p> <img class='products' src='{{block.imgCar[0]}}' /> </div> <div *ngIf="block.amountCar > 4" class="blocknr{{block.id}}"> <p>{{block.textCar[4]}}</p> <img class='products' src='{{block.imgCar[0]}}' /> </div> <div *ngIf="block.amountCar > 5" class="blocknr{{block.id}}"> <p>{{block.textCar[5]}}</p> <img class='products' src='{{block.imgCar[0]}}' /> </div> </div> </div> As you can tell, it loops through a list of 20 items, called *blokken*. There is also an animation, called @animState, which can be activated through the function that is called when clicked (click). This is that function: toggleState() { var numberofblock = this.id; var n = ".blocknr" + numberofblock.toString(); var n2 = ".blockexnr" + numberofblock.toString(); console.log(n); console.log(n2); $(n).html(""); $(".cell").not(n2).css("z-index", -1); this.state = (this.state === 'active' ? 'inactive' : 'active'); } That function changes the state of a block to *active*, and on that way that block scales: trigger('animState', [ state('inactive', style({ transform: 'scale(1)' })), state('active', style({ transform: 'scale(10)' })), transition('inactive => active', animate('2000ms ease-in')), ]) This all works fine and all, but what I actually want to happen is that when clicked on a block, it scales and then routes to a new page. But when I add a *[routerLink]*, it doesn't go to the toggleState() function at all, all it does then is routing to the new component. I also tried the @routeAnimation animation, but the animation in there applies to the whole component - not just one div - which is not what I want. I've been Googling with not much success, the only thing I found was that I might be able to use a *resolver*, but I'm not really sure about that either. Could anyone maybe help me with making this work (so when clicking a block this is the order of things: 1. Click the block 2. Going to the toggleState() function 3. Doing the scaling animation of *1 *block (the one you clicked) 4. Routing to a new component. I hope someone can help me with this. Thanks! -- You received this message because you are subscribed to the Google Groups "Angular" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
