No Angular Animations on the default state

Question

Hi here is my updated code which has animations of sliding left and right. So I wanted to see if we can control the default state without any animations. Like there shouldn't be any animation when panel is 'TRUE' and when we click the button the animations should work as usual.

I am now able to control the default state of the slider but the button needs to be still looked into.

Also, I have added the same code for the button too. And it won't work for the button. If we use the commented code for the button it works but again there is animation on the first time which I don't want.

Answer 1

You can disable animations with [@.disabled]="true" Source: https://angular.io/api/animations/trigger#disabling-animations

Sample:

<div class="container" [@slide]="isOpen ? true : false" [@.disabled]="true">

Will disable the sliding animation of the gray box.

Answer 2

Ok! so here it is, found a solution to control the button state as well on the page load.

isOpenEver = false;

  get openCloseState(): string|undefined{
    if(!this.isOpenEver){
      return undefined;
    }
    return this.isOpen ? 'open' : 'closed';
  }

togglePanel(): void {
    this.isOpenEver = true;
    this.isOpen = !this.isOpen;
  }

And using the state in the HTML button:

<button [class.button-resize-expand]="!isOpen"
          [class.button-resize-collapse]="isOpen"
          (click)="togglePanel()" [@openClose] ="openCloseState">
    <mat-icon class="rotate-chevron" [class.rotate-clicked]="!isOpen">{{isOpen ? 'chevron_left' : 'chevron_right'}}</mat-icon>
  </button>

Also here is the updated stackblitz