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'';
  }