Angular2 animate when model changes

Question

I have component PageComponent which data is renewed on different url. I want animate when Page model is changed. In my given sample animation works only first time when PageComponent is loaded.

What should I add / change that animation would work when model is updated?

page.component.ts

@Component({
    selector: 'my-page',
    templateUrl: './page.component.html',
    styleUrls: ['./page.component.scss'],
    providers: [PageService],
    pipes: [SafePipe],
    host: { '[@routeAnimation]': 'true' },
    animations: Animations.page
})
export class PageComponent implements OnInit {

    page: Page;

    constructor(private route: ActivatedRoute,
                private pageService: PageService) {
    }

    ngOnInit() {
        this.route.params.forEach((params: Params) => {
            let uri = params['uri'];
            this.getPage(uri);
        });
    }

    getPage(uri: string) {
        this.pageService.getPage(uri).subscribe(
            page => this.page = page,
            error => this.errorMessage = <any>error
        );
    }
}

animation.ts

import {style, animate, transition, state, trigger} from '@angular/core';

export class Animations {
    static page = [
        trigger('routeAnimation', [
            transition('void => *', [
                style({
                    opacity: 0,
                    transform: 'translateX(-100%)'
                }),
                animate('2s ease-in')
            ]),
            transition('* => void', [
                animate('2s 10 ease-out', style({
                    opacity: 0,
                    transform: 'translateX(100%)'
                }))
            ])
        ])
    ];
}

score 0 · Answer 1 · answered Mar 18 '17 at 18:54

I had the same issue and I solved it using steps described in the article Using ChangeDetection With Animation To Setup Dynamic Void Transitions In Angular 2 RC 6. There are basically 3 steps you need to do:

Import ChangeDetectorRef class

import { ChangeDetectorRef } from "@angular/core";

Create instance of this class using dependency injection

constructor(private changeDetector: ChangeDetectorRef) {}

Call method detectChanges() on your instance of the ChangeDetectorRef class after the change

// Change your model ...
SomeMethodWhichChangesTheModel();

// ... and call the detectChanges() method on the ChangeDetectorRef
this.changeDetector.detectChanges();

Angular2 animate when model changes

1 Answers1