title: Angular 5 animation - state transition for multiple buttons
body: <p>I am working with PWA application using angular material and angular 5 animations. I'm using stepper component and have 2 buttons in each step. I would like to create a state (inactive/active) animation during hover event for each button. I am able to achieve this using variable/state binding for each button separately. But it looks like a lot of code in HTML. Is there any way i can achieve this using HostListener &amp; hostbinding and avoid those html scripts.</p>
  
  <p><strong>app.component.html</strong></p>
  
  <p><strong>step - 1</strong> </p>
  
  <pre><code>&lt;button id="login-form" [@buttonStateAnimation]="states.loginButton" (mouseenter)="toggleState('loginButton')" (mouseleave)="toggleState('loginButton')"
            [disabled]="!loginForm.valid" mat-raised-button (click)="loginEmail()" color="primary"&gt;
            &lt;span&gt;Login&lt;/span&gt;
          &lt;/button&gt;
          &lt;button mat-raised-button (click)="signup()" [@buttonStateAnimation]="states.signupButton" (mouseenter)="toggleState('signupButton')"
            (mouseleave)="toggleState('signupButton')" matTooltip="New user? Sign up"&gt;
            &lt;span&gt;Sign up&lt;/span&gt;
          &lt;/button&gt;
  </code></pre>
  
  <p><strong>step - 2</strong></p>
  
  <pre><code>&lt;button matTooltip="Login with Facebook" [@socialButtonsAnimation]="states.facebookButton" (mouseenter)="toggleState('facebookButton')"
            (mouseleave)="toggleState('facebookButton')" mat-mini-fab color="primary" (click)="loginFacebook()"&gt;
            &lt;mat-icon class="fa-lg" fontSet="fontawesome" fontIcon="fa-facebook-square"&gt;&lt;/mat-icon&gt;
          &lt;/button&gt;
          &lt;button matTooltip="Login with Google" [@socialButtonsAnimation]="states.googleButton" (mouseenter)="toggleState('googleButton')"
            (mouseleave)="toggleState('googleButton')" mat-mini-fab color="warn" (click)="loginGoogle()"&gt;
            &lt;mat-icon class="fa-lg" fontSet="fontawesome" fontIcon="fa-google"&gt;&lt;/mat-icon&gt;
          &lt;/button&gt;
          &lt;button matTooltip="Login with Twitter" [@socialButtonsAnimation]="states.twitterButton" (mouseenter)="toggleState('twitterButton')"
            (mouseleave)="toggleState('twitterButton')" mat-mini-fab color="primary" (click)="loginTwitter()"&gt;
            &lt;mat-icon class="fa-lg" fontSet="fontawesome" fontIcon="fa-twitter"&gt;&lt;/mat-icon&gt;
          &lt;/button&gt;
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>export class LoginComponent implements OnInit {
    private states: any;
    ngOnInit() {
      this.states = {
        loginButton: "inactive",
        signupButton: "inactive",
        facebookButton: "inactive",
        googleButton: "inactive",
        twitterButton: "inactive"
     }
   }
  }
  </code></pre>
  
  <p><strong>animations.ts</strong></p>
  
  <pre><code>export const buttonStateAnimation =
  
   trigger('buttonStateAnimation', [
      state('inactive', style({ transform: 'translateX(0) scale(1)' })),
      state('active', style({ transform: 'translateX(0) scale(1.2)' })),
      transition('inactive =&gt; active', animate('200ms ease-in')),
      transition('active =&gt; inactive', animate('200ms ease-out')),
      transition(
        ':enter', [
          style({ transform: 'scale(.7)', opacity: 0 }),
          animate('0.3s', style({ opacity: 1, transform: 'scale(1)' })),
        ]
      ),
      transition(
        ':leave', [
          style({ opacity: 1, transform: 'scale(1)' }),
          animate('5.3s', style({ opacity: 0, transform: 'scale(.7)' })),
        ]
      )
    ])
  </code></pre>
  
  <p>Now the above code looks repetitive and ugly in html. Is there any way this can be avoided and handled with host binding and at the same time maintain state for each buttons separately. Please help!!</p>