title: Animation transition not working - angular 6
body: <p>I need to animate when opening and closing a Sidenav</p>
  
  <pre><code>    animations: [
      trigger('slider', [
        state('open', style(
          {}
        )),
        state('closed', style(
          {}
        )),
        transition('closed =&gt; open', animate('0.4s ease-in')),
        transition('open =&gt; closed', animate('0.4s ease-out'))      
      ])
    ]
  </code></pre>
  
  <p>...</p>
  
  <pre><code>  @Input('state') state: string = 'closed';
  
  
    toggleState() {
      this.state = this.state === 'open' ? 'closed' : 'open';
    }
  
    openSidenav() {
      this.opened = true;
      this.aux = 0;
      this.toggleState();
    }
  
    closeSidenav() {
      if (this.opened) {
        this.opened = !this.opened;
        this.toggleState();     
      }
    }
  </code></pre>
  
  <p>....</p>
  
  <p>my html</p>
  
  <pre><code>&lt;div [@slider]="state" &gt;
      &lt;header&gt; {{ navTitle }} &lt;/header&gt;
      &lt;i *ngIf="showCloseButton" class="iconic" (click)="closeSidenav()"&gt;&lt;/i&gt;
      &lt;ng-content&gt;&lt;/ng-content&gt;
  &lt;/div&gt;
  
  &lt;div *ngIf="backdrop &amp;&amp; opened" class="sidenav-backdrop"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>does not display any errors just does not apply the animation...Where am I going wrong?</p>