angular mouseenter

1<div (mouseover)="changeText=true" (mouseout)="changeText=false">
2  <span *ngIf="!changeText">Hide</span>
3  <span *ngIf="changeText">Show</span>
4</div>
5

1To avoid blinking problem use following code
2its not mouseover and mouseout instead of that use mouseenter and mouseleave
3
4
5**app.component.html**
6
7    <div (mouseenter)="changeText=true" (mouseleave)="changeText=false">
8      <span *ngIf="!changeText">Hide</span>
9      <span *ngIf="changeText">Show</span>
10    </div>
11
12**app.component.ts**
13
14@Component({
15   selector: 'app-main',
16   templateUrl: './app.component.html'
17})
18export class AppComponent {
19    changeText: boolean;
20    constructor() {
21       this.changeText = false;
22    }
23}
24

1<mat-list dense>
2        <ng-template ngFor let-message [ngForOf]="conversation?.messages" let-i="index" let-odd="odd" [ngForTrackBy]="trackById">
3            <mat-list-item (mouseenter)="enter(i)" (mouseleave)="leave(i)" class="chat-message-body" *ngIf="auth._id === message.author._id"
4                fxLayoutAlign="" dir="rtl">
5                <img matListAvatar class="img-box" src="http://via.placeholder.com/30x30" alt="...">
6                <button mat-icon-button *ngIf="hoverIndex == i">
7                    <mat-icon aria-label="">keyboard_arrow_down</mat-icon>
8                </button>
9                <div matLine>
10                    <b>{{message.author.profile.username}} </b>
11                    <span>{{message.created_at | date:'shortTime'}} </span>
12                </div>
13                <span matLine> {{message.body}} </span>
14            </mat-list-item>
15        </ng-template>
16    </mat-list>
17

1<div (mouseover)="changeText=true" (mouseout)="changeText=false">
2  <span [hidden]="changeText">Hide</span>
3  <span [hidden]="!changeText">Show</span>
4</div>
5

1enter(i) {
2    this.hoverIndex = i;
3}
4
5leave(i) {
6    this.hoverIndex = null;
7}
8

1  <div *ngFor="let i of [1,2,3,4]" > hover me please.
2    <span class="only-show-on-hover">you only see me when hovering</span>
3  </div>
4

1changeText:boolean=true;
2

1import { Directive, OnInit, ElementRef, Renderer2 ,HostListener,HostBinding,Input} from '@angular/core';
2import { MockNgModuleResolver } from '@angular/compiler/testing';
3//import { Event } from '@angular/router';
4
5@Directive({
6  selector: '[appBetterHighlight]'
7})
8export class BetterHighlightDirective implements OnInit {
9   defaultcolor :string = 'black'
10   Highlightedcolor : string = 'red'
11    @HostBinding('style.color') color : string = this.defaultcolor;
12
13  constructor(private elm : ElementRef , private render:Renderer2) { }
14ngOnInit()
15{}
16@HostListener('mouseenter') mouseover(event :Event)
17{
18
19  this.color= this.Highlightedcolor ;
20}
21@HostListener('mouseleave') mouseleave(event: Event)
22{
23
24  this.color = this.defaultcolor;
25}
26}
27

1div span.only-show-on-hover {
2    visibility: hidden;
3}
4div:hover span.only-show-on-hover  {
5    visibility: visible;
6}
7

1@Component({
2   selector: 'app-main',
3   templateUrl: './app.component.html'
4})
5export class AppComponent {
6    changeText: boolean;
7    constructor() {
8       this.changeText = false;
9    }
10}
11