how can i flash image by hovering on button with the help of mouseover option in angularjs2?

Question

What I want to do is when I hover on the 'click me' button then it should show an image on the web page and when i unhover it should not show any image with the help of mouseover option

here is what i tried to do in app.component.ts and my.component.ts files

here is the code for app.component.ts :

import { Component } from '@angular/core';     //importing components from angular
import { MyComponent } from './my.component';   //importing components from my.component  



@Component({
     selector: 'my-app',
     template: `<h1> Hi Buddy!! </h1>
          <mytag></mytag>`,
     directives: [MyComponent]         //adding directives from mycomponents
})
export class AppComponent { }

and here is the code for my.component.ts:

import { Component } from "@angular/core";

@Component({
        selector:'mytag',
        template: `<button (mouseover)="<img [src]="image"> "  >click me</button>`   // here i tried to flash image by hovering
})
export class MyComponent{
      public image="http://lorempixel.com/400/200";
      myclick(klm){
           console.log(klm);

     }
}

so what changes should i make in the class or meta data of my.component.ts in order to do so

Answer 1

You can use Angular Animations module to achieve the same.

Make the below changes to your MyComponent:

import { Component } from '@angular/core'
import { trigger, state, style, transition, animate, keyframes, group } from '@angular/animations';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@Component({
      selector:'mytag',
      template: `<button (mouseover)="toggleOnOff()">click me</button>
                  <img [src]="image" [@switchImageDisplay]="showImage"/>
                  `
      ,
      animations: [
        trigger("switchImageDisplay",[
          state("show", style({
            display : 'block'
          })),
          state("hide", style({
            display : 'none'
          })),
          transition('show <-> hide',[animate('0s')]),
        ])

      ]
    })
export class SwitchDisplayComponent {
      public image="http://lorempixel.com/400/200";
      public showImage : string;
          toggleOnOff(){
            console.log("Previous display value is",this.showImage);
               this.showImage = (this.showImage === "show") ? "hide" : "show";
              console.log("Current display value is",this.showImage);
         }

}

Explanation: toggleOnOff() function sets a string variable showImage as show and hide. In Animations we create a trigger and give it a name. In our case we have named it as "switchImageDisplay". We declared two states in the animation trigger that is "show" and "hide". In those states we defined what CSS to be used. Finally we defined a transition, which is 2 ways binded and is performed in 0 seconds. If you want the image to be hidden over a period of time increase the time.

In template code, we have binded the img tag to the animation using the code [@switchImageDisplay]="showImage". Based on the "showImage" value, the animation "switchImageDisplay"'s state is defined.

Import the import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; in your app.module.ts and in the imports array as well.