Angular2 animate doesn't work with ngIf

Question

<div *ngIf="clientTable" [@clientTableState]="testAnimate.state" class="clientdata">
  <div class="table-holder">
    <table id="header-fixed"><a (click)="closeClientTable()" class="table-close"><i class="ion-close-circled"></i></a>
      <tr>
        <th colspan="8">{{ clientTableHeader }}</th>
      </tr>
      <tr>
        <th rowspan="2">Bookie</th>
        <th colspan="3">Payment</th>
        <th colspan="3">Bookie</th>
        <th rowspan="2">Balance</th>
      </tr>
    </table>
  </div>
</div> 

@Component({
  templateUrl: 'app/html-templates/bookiedata.html',
  styleUrls: ['css/templates.css'],
  animations: [
    trigger('clientTableState', [
        state('inactive', style({
            opacity: 0
        })),
        state('active', style({
            opacity: 1
        })),
        transition('inactive => active', animate('0.8s ease-in-out')),
        transition('active => inactive', animate('0.8s ease-in-out'))
    ])
  ]
})

Toggling State Method

// declaration
clientTable: boolean = false
testAnimate: any = { state: 'inactive' }

// method
toggleState(){
    this.testAnimate.state == 'inactive' ? this.testAnimate.state = 'active' : this.testAnimate.state = 'inactive'
    this.clientTable = true
}

However, if I remove *ngIf ng2-animation will work.

Theoretically, ngIf checks and if it's true. The element would be available on DOM. Based on my understanding, the element should also have the state inactive since it was not triggered. After clicking the trigger, the element will be available and will have the state of active.

But why it doesn't have any animation?

Is there any work around that will let me use ngIf and animation?

Pretty sure animate works with *ngIf, because the whole point with animate is to animate when elements leave and enter the DOM. — Chrillewoodz, Oct 13 '16 at 06:12
@Chrillewoodz Have you tried it? I don't have any error but doesn't work fine for me. And also, In https://angular.io/docs/ts/latest/guide/animations.html#!#example-entering-and-leaving, `they don't use ngIf` — hdotluna, Oct 13 '16 at 06:13
Just updated my answer at http://stackoverflow.com/questions/36417931/angular-2-ngif-and-css-transition-animation — Günter Zöchbauer, Oct 13 '16 at 06:14
I have done it with a notifications component a while back if I remember correctly. Could have used *ngFor but I don't see how it would act very different to *ngIf. — Chrillewoodz, Oct 13 '16 at 06:14
@Chrillewoodz I used it also for ngFor and it work well. Ask Gunter if you don't believe me. :) Look at his answer. He changed *ngIf to [hidden] — hdotluna, Oct 13 '16 at 06:18
He did, but in his updated answer he is using `*ngIf` which you should take a look at. — Chrillewoodz, Oct 13 '16 at 06:22
@Chrillewoodz *ngIf removes the element from the DOM when the expression becomes false. You can't have a transition on a non-existing element. — hdotluna, Oct 13 '16 at 07:00
@Chrillewoodz There's no inactive state when using *ngIf. :) — hdotluna, Oct 13 '16 at 07:10

score 1 · Accepted Answer · answered Oct 13 '16 at 06:14

It should work with this,

toggleState(){

    this.clientTable = true          //<<<===changed order.

    this.testAnimate.state == 'inactive' ? this.testAnimate.state = 'active' : this.testAnimate.state = 'inactive'

}

If it doesn't work (workaround)

toggleState(){

    this.clientTable = true          //<<<===changed order.

    setTimout(()=>{
       this.testAnimate.state == 'inactive' ? this.testAnimate.state = 'active' : this.testAnimate.state = 'inactive'
    },2000)

}

Angular2 animate doesn't work with ngIf

1 Answers1