Angular 2 trigger text crossfade animation on data change

Question

I have an Angular 2 component which displays a heading. There is a service which listens for data changes from other components and can change the string value of the heading.

I want to use Angular animations to fade in the text when it loads and then to dissolve/crossfade when the heading text changes. I have the fadein working but am unsure how to trigger the crossfade and whether the same transition would be used.

Here is the code so far:

import { Component, OnInit, Input, style, transition, animate, trigger } from '@angular/core';
import { DataTransferService } from '../services/data-transfer.service';

@Component({
    selector: 'app-page-header',
    template: '<h1 [innerHTML]="heading" [@fadeMe]="heading" *ngIf="heading != null"></h1>',
    animations: [
        trigger('fadeMe', [
            transition('void => *', [style({opacity: 0}), animate('500ms ease-in', style({opacity: 1}))])
        ])
    ]
})
export class PageHeaderComponent implements OnInit {

    public heading: string = '';

    constructor(
        private pageHeaderService: DataTransferService
    ) { }

    ngOnInit() {
        this.pageHeaderService.pageHeaderData$.subscribe(
            data => {
                this.heading = data['heading'];
            });
    }

}

Any help much appreciated.

Answer 1

Although this is 6 months old, I just bumped into this yesterday.
Here's a quick solution for this:

If you think about it, you will realize that in order to crossfade you must have both previous and current titles at hand. So what's left now is to hide and show both interchangeably.

    <!-- class title sets both to the same absolute location -->
    <h1 class="title" [@crossfade]="state1">{{title1}}</h1>
    <h1 class="title" [@crossfade]="state2">{{title2}}</h1>

animations: [
        trigger('crossfade', [
            state('show', style({ opacity: 1 })),
            state('hide', style({ opacity: 0 })),
            transition('* => show', animate('1s ease-in')),
            transition('show => hide', animate('1s ease-out'))
        ])]

...

    title1: string;
    title2: string;
    state1 = 'hide';
    state2 = 'hide';

 switchTitles() {
        const newTitle = ... //get new title
        if (this.state1 === 'show') {
            this.title2 = newTitle;
            this.state1 = 'hide';
            this.state2 = 'show';
        } else {
            this.title1 = newTitle;
            this.state2 = 'hide';
            this.state1 = 'show';
        }
    }