How to add class to a div when hovered on the div.
Template -
<div class="red">On hover add class ".yellow"</div>
Component -
import {Component} from 'angular2/core';
@Component({
selector: 'hello-world',
templateUrl: 'src/hello_world.html',
styles: [`
.red {
background: red;
}
.yellow {
background: yellow;
}
`]
})
export class HelloWorld {
}
[ NOTE - I specifically want to add a new class and not modify the existing classes ]
Sigh! It is such a normal use case and I do not see any straight forward solution yet!
Not to dirty the code I just coded simple hover-class directive.
<span hover-class="btn-primary" class="btn" >Test Me</span>
Here below the directive,
import { Directive, HostListener, ElementRef, Input } from '@angular/core';
@Directive({
selector: '[hover-class]'
})
export class HoverClassDirective {
constructor(public elementRef:ElementRef) { }
@Input('hover-class') hoverClass:any;
@HostListener('mouseenter') onMouseEnter() {
this.elementRef.nativeElement.classList.add(this.hoverClass);
}
@HostListener('mouseleave') onMouseLeave() {
this.elementRef.nativeElement.classList.remove(this.hoverClass);
}
}
You can also just use something like:
[ngClass]="color" (mouseover)="changeStyle($event)" (mouseout)="changeStyle($event)"
Then in the component
color:string = 'red';
changeStyle($event){
this.color = $event.type == 'mouseover' ? 'yellow' : 'red';
}
Alternatively, do everything in the markup:
[ngClass]="color" (mouseover)="color='yellow'" (mouseout)="color='red'"