Angular 2: Get reference to a directive used in a component
I want to change img src on hover.for reference go through this link:--
- stackoverflow.com/a/37688325/4102561Supamiu– Supamiu2016-09-09 09:42:14 +00:00Commented Sep 9, 2016 at 9:42
- Possible duplicate of Angular Change image src depending on classMeneer Venus– Meneer Venus2016-09-09 09:46:23 +00:00Commented Sep 9, 2016 at 9:46
- the solution on this page offers an example of control via mouse events, not a class dependencysamneric– samneric2019-04-29 19:40:25 +00:00Commented Apr 29, 2019 at 19:40
Add a comment |
1 Answer
You can use mouseenter and mouseout on host element as shown below,
Look at working demo : https://plnkr.co/edit/GfgZ46?p=preview
//our root app component import {Component, Directive, Output, EventEmitter, Input, SimpleChange} from 'angular2/core' @Component({ selector: 'my-app', host: { '(mouseenter)':'MouseEnter()' '(mouseout)':'MouseOut()' }, template: ` <img [src]="source"/> ` }) export class App { source='images/angular.png'; MouseEnter(){ console.log('Hovering'); this.source = 'images/car.png'; } MouseOut(){ this.source='images/angular.png'; } } 
10 Comments
kapiljain123
my HTML:--<img class="badge_alignment" [src]="source" width="50px" height="50px" on-mouseover='MouseEnter()' on-mouseout='MouseOut()' > is that a correct way to change image source on hover?
micronyks
what is on-mouseover and on-mouseout?
kapiljain123
My Html;--<img _ngcontent-luk-5="" class="badge_alignment" height="50px" width="50px" src="assets/img/{{key}}_inactive.png"> Component.ts;-- public source='assets/img/{{key}}_inactive.png'; MouseEnter(){ console.log('Hovering'); this.source = 'assets/img/{{key}}_active.png'; } MouseOut(){ console.log('mouseout'); this.source='assets/img/{{key}}_inactive.png'; } but the source is not going to bind and the image is not going to display.
kapiljain123
In HTML i give a images [src]="source" and Define the source in component.ts like that public source="assets/img/{{key}}_inactive.png"; but when i am going to display my page for images it shows 404 not found error. How can i solve this.
micronyks
Which Angular2 version are you using?
|