Why is my route animation not working in Angular2?

Question

App.module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from "@angular/http";
import { BrowserAnimationsModule} from '@angular/platform-browser/animations';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CreateComplaintComponent } from './create-complaint/create-complaint.component';
import { ComplaintService } from './Complaints/ComplaintService';
import { NcrToasterService } from './toaster/NcrToasterService';
import { ToasterModule } from 'angular2-toaster';
import { ComplaintOverviewComponent } from './complaint-overview/complaint-overview.component';

@NgModule({
  declarations: [
    AppComponent,
    CreateComplaintComponent,
    ComplaintOverviewComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule, 
    HttpModule,
    BrowserAnimationsModule,
    ToasterModule
  ],
  providers: [
    ComplaintService,
    NcrToasterService
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

Routing module:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CreateComplaintComponent } from './create-complaint/create-complaint.component';
import { ComplaintOverviewComponent } from './complaint-overview/complaint-overview.component';

const routes: Routes = [
    {
        path: 'create',
        component: CreateComplaintComponent
    },
    {
        path: 'overview',
        component: ComplaintOverviewComponent
    },
    {
        path: '',
        redirectTo: '/create',
        pathMatch: 'full'
    },
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

Create complaint component:

    import { Injectable, animate, transition, trigger, state, style, HostBinding } from '@angular/core';
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Complaint, ComplaintType } from '../Complaints/Complaint';
import { ComplaintService} from '../Complaints/ComplaintService';
import { NcrToasterService } from '../toaster/NcrToasterService';
import { ToasterConfig } from 'angular2-toaster';
import { Router } from '@angular/router';
import { fadeInAnimation } from "../animations";

@Component({
    moduleId: module.id.toString(),
selector: 'app-create-complaint',
templateUrl: './create-complaint.component.html',
styleUrls: ['./create-complaint.component.less'],
encapsulation: ViewEncapsulation.None,
animations: [fadeInAnimation],
})

export class CreateComplaintComponent {
    @HostBinding('@fadeInAnimation')fadeInAnimation=true;
    private complaint: Complaint;
    private ComplaintType: typeof ComplaintType = ComplaintType;
    private ToasterConfig : ToasterConfig;

    constructor(private complaintService: ComplaintService,
                private toaster : NcrToasterService,
                private router: Router) {
        this.complaint = new Complaint();      
    }
}

Animations.ts

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

export const fadeInAnimation =
// trigger name for attaching this animation to an element using the [@triggerName] syntax
trigger('fadeInAnimation', [

    // route 'enter' transition
    transition(':enter', [

        // css styles at start of transition
        style({ opacity: 0 }),

        // animation and styles at end of transition
        animate('5s', style({ opacity: 1 }))
    ]),
]);

I want to add an animation (fade-in) when a component is displayed. I see that my routing is working, but it doesn't fade-in. I've set the animation time to 5 seconds, but my component is instantly loaded, ignoring the complete transaction.

What am I missing here?

I am using Angular 4, using angular-cli.

Answer 1

Try to replace in complaint component:

@HostBinding('@fadeInAnimation') fadeInAnimation = true;

with

host: { '[@fadeInAnimation]': '' }

in component definition.

I made a sample project with your code and that works for me.