Run code before routing Angular2

Question

I'm currently building an app in Angular2, with this homescreen:

<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!

Answer 1

If anyone ever stubles accross this post, it is actually very easy.

The only thing needed is

constructor(private router: Router){}

this.router.navigate(["/LINK"]);

So I just needed to call a function with the this.router thingy, and that's it. On this way the [routerLink] wasn't needed.