Angularでホバーイベント

今日Angularでホバーイベントを使ったので書いていきたいと思います

今日のコード

html側

// app.component.html

.........
.........
        <div class="status" *ngIf="hero.status === 1">
          <div
            class="notice"
            (mouseout)="isHover = !isHover"
            (mouseover)="isHover = !isHover"
          >
            お買い得
          </div>
          <span *ngIf="isHover">他店舗平均より{{ hero.priceRate }}円お得</span>
        </div>
        {{hero.name}}
      </li>
      <li>{{hero.price}}</li>
      <li>{{hero.address}}</li>
    </ul>
  </ng-template>
</div>

angularでイベントリスナーを使用してホバー対象に要素に入った時と、出た時でそれぞれに反応して欲しい為、
mouseoutとmouseover二つのイベントを追加しています。
*ngIf="isHover = !isHover"でホバーするごとにfalseとtrueを切り替えていて、
*ngIf="isHover"で対象の表示/非表示を行っています。

typeScript側

// app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  isHover: boolean = false;
  array = [
    {
      id: 0,
      status: 1,
      name: "スイカ",
      price: 1200,
      address: "群馬県",
      priceRate: 240
    }
  ];
}

初期値は非表示なのでisHoverをfalseに設定しています。

まとめ

現状だと配列の中のオブジェクトが増えていくと、ホバーイベントを実行した際に全てが同時に切り替わってしますことになっています。
次回はそれぞれが独立して動くように調整していきましょう。

ブログの投稿ログ

# 今日のコード

# html側

# typeScript側

# まとめ

今日のコード

html側

typeScript側

まとめ