Événement de survol Angular 2

1. Les applications mouseenter et mouseleave dans Angular
2. Les applications mouseover et mouseout en Angular
3. Passez le mouseenter et mouseleave en tant que fonction dans Angular

Lorsque vous passez votre souris sur certains éléments de l’écran, vous accédez aux informations sans cliquer. Vous pouvez même exécuter certaines fonctions sur l’élément que vous survolez avec votre souris.

Cet article examine des solutions simples pour exécuter le survol de la souris de la fonction d’événement de survol sur les éléments.

Nous allons appliquer les fonctions mouseenter et mouseleave pour créer un événement de survol. La seconde méthode utilisera également deux fonctions, à savoir le mouseover et le mouseout.

Nous appliquerons ensuite une approche plus avancée pour réaliser un événement de survol.

Les applications mouseenter et mouseleave dans Angular

Lorsqu’il s’agit de fonctions qui viennent par paires, nous devons transmettre des entrées pour chaque fonction.

Nous utilisons la fonction mouseenter pour déclarer ce qui se passe lorsque nous passons la souris sur l’élément. La fonction mouseleave détermine alors ce qui se passe lors du déplacement de la souris.

L’entrée HTML ressemblera à ceci :

<div style="text-align: center;">
  <h2>Mouse Hover Event</h2>
</div>

<button
  class="btn-primary btn"
  (mouseenter)="showImage = true"
  (mouseleave)="showImage = false"
>
  Hover Over Me!
</button>

<br />

<img
  *ngIf="showImage"
  src="https://vangogh.teespring.com/v3/image/so-OI-9L5KAWsqHQuv6gQwymSQ8/480/560.jpg"
/>

Ensuite, nous écrirons le app.component.ts comme ci-dessous :

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;

  title = 'mouse-hover';
  showImage: boolean;

  constructor() {
    this.showImage = false;
  }
}

Les applications mouseover et mouseout en Angular

Les attributs mouseover et mouseout fonctionnent par paires comme la méthode expliquée plus tôt, il suffit d’intervertir les fonctions et voilà :

<div style="text-align: center;">
  <h2>Mouse Hover Event</h2>
</div>

<button
  class="btn-primary btn"
  (mouseover)="showImage = true"
  (mouseout)="showImage = false"
>
  Hover Over Me!
</button>

<br />

<img
  *ngIf="showImage"
  src="https://vangogh.teespring.com/v3/image/so-OI-9L5KAWsqHQuv6gQwymSQ8/480/560.jpg"
/>

Passez le mouseenter et mouseleave en tant que fonction dans Angular

Nous allons devenir un peu plus créatifs et sophistiqués avec la méthode suivante, où nous passerons les événements mouseenter et mouseleave en tant que fonction.

Le HTML sera légèrement modifié :

<div style="text-align: center;">
  <h2>Mouse Hover Event</h2>
</div>

<button
  class="btn-primary btn"
  (mouseover)="showImg(true)"
  (mouseleave)="showImg(false)"
>
  Hover Over Me!
</button>

<br />

<img
  *ngIf="showImage"
  src="https://vangogh.teespring.com/v3/image/so-OI-9L5KAWsqHQuv6gQwymSQ8/480/560.jpg"
/>

Et le app.component.ts aussi :

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;

  title = 'mouse-hover';
  showImage: boolean;

  constructor() {
    this.showImage = false;
  }

  showImg(hover: boolean) {
    this.showImage = hover;
  }
}