When I hover over the 'click me' button, I want an image to appear on the webpage. When I stop hovering, the image should disappear using the mouseover option.
This is what I attempted in my app.component.ts and my.component.ts files:
Here is the code for app.component.ts:
import { Component } from '@angular/core';
import { MyComponent } from './my.component';
@Component({
selector: 'my-app',
template: '<h1> Hi Buddy!! </h1>
<mytag></mytag>',
directives: [MyComponent]
})
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>` // I tried to display image by hovering
})
export class MyComponent{
public image="http://lorempixel.com/400/200";
myclick(klm){
console.log(klm);
}
}
What changes should I make in the class or metadata of my.component.ts to achieve this?