angular - name - ¿Cómo puedo agregar una clase a un elemento al desplazar?

ng-class conditional

Question

Cómo agregar clase a un div cuando se desplaza sobre el div.

Modelo -

<div class="red">On hover add class ".yellow"</div>

Componente -

import {Component} from ''angular2/core'';
@Component({
selector: ''hello-world'',
templateUrl: ''src/hello_world.html'',
styles: [`
.red {
background: red;
}
.yellow {
background: yellow;
}
`]
})
export class HelloWorld {
}

Demo

[NOTA - Específicamente quiero agregar una nueva clase y no modificar las clases existentes]

¡Suspiro! ¡Es un caso de uso tan normal y todavía no veo ninguna solución directa!

Answer 1

En caso de que establezca los estilos mediante programación (por ejemplo, desde un atributo en el componente) y desee que cambie al pasar el mouse, puede ver esta demostración de Plunker .

También responde la pregunta cuando varios elementos tienen que responder al evento mouseover.

Aquí está el código:

@Component({
selector: ''app'',
template: `
<div id="1"
(mouseover)="showDivWithHoverStyles(1)"
(mouseout)="showAllDivsWithDefaultStyles()"
[ngStyle]="hoveredDivId ===1 ? hoveredDivStyles : defaultDivStyles">
The first div
</div>
<div id="2"
(mouseover)="showDivWithHoverStyles(2)"
(mouseout)="showAllDivsWithDefaultStyles()"
[ngStyle]="hoveredDivId === 2 ? hoveredDivStyles : defaultDivStyles">
The second div
</div>`
})
class App{
hoveredDivId;
defaultDivStyles= {height: ''20px'', ''background-color'': ''white''};
hoveredDivStyles= {height: ''50px'', ''background-color'': ''lightblue''};
showDivWithHoverStyles(divId: number) {
this.hoveredDivId = divId;
}
showAllDivsWithDefaultStyles() {
this.hoveredDivId = null;
}
}

Answer 2

Simple como abajo

<button [class.btn-success]="mouseOvered"
(mouseover)="mouseOvered=true"
(mouseout)="mouseOvered=false"> Hover me </button>

DEMO EN VIVO

Answer 3

También puedes usar algo como:

[ngClass]="color" (mouseover)="changeStyle($event)" (mouseout)="changeStyle($event)"

Luego en el componente

color:string = ''red'';
changeStyle($event){
this.color = $event.type == ''mouseover'' ? ''yellow'' : ''red'';
}

Plunker

Alternativamente, hacer todo en el marcado:

[ngClass]="color" (mouseover)="color=''yellow''" (mouseout)="color=''red''"

Answer 4

@HostListener decorator también es una buena opción si está aplicando en todo el componente.

mantenga el html tal como está y en el componente agregue @HostListener

 <div class="red">On hover add class ".yellow"</div>
@HostListener(''mouseenter'') onMouseEnter() {
this.elementRef.nativeElement.class = ''red'';
}
@HostListener(''mouseleave'') onMouseLeave() {
this.elementRef.nativeElement.class = ''yellow'';
}