CODEWITHSUNDEEP
angularangular2-animation
hdotluna
hdotluna

Reputation: 5732

Angular2 animate doesn't work with ngIf

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

Upvotes: 1

Views: 2181

Answers (1)

micronyks
micronyks

Reputation: 55443

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)

}

Upvotes: 1

Related Questions