What is angular mouseenter in HTML

enter(i) {
this.hoverIndex = i;
}

leave(i) {
this.hoverIndex = null;
}
<mat-list dense>
<ng-template ngFor let-message [ngForOf]="conversation?.messages" let-i="index" let-odd="odd" [ngForTrackBy]="trackById">
<mat-list-item (mouseenter)="enter(i)" (mouseleave)="leave(i)" class="chat-message-body" *ngIf="auth._id === message.author._id"
fxLayoutAlign="" dir="rtl">
<img matListAvatar class="img-box" src="http://via.placeholder.com/30x30" alt="...">
<button mat-icon-button *ngIf="hoverIndex == i">
<mat-icon aria-label="">keyboard_arrow_down</mat-icon>
</button>
<div matLine>
<b>{{message.author.profile.username}} </b>
<span>{{message.created_at | date:'shortTime'}} </span>
</div>
<span matLine> {{message.body}} </span>
</mat-list-item>
</ng-template>
</mat-list>
<div (mouseover)="changeText=true" (mouseout)="changeText=false">
<span *ngIf="!changeText">Hide</span>
<span *ngIf="changeText">Show</span>
</div>
@Component({
selector: 'app-main',
templateUrl: './app.component.html'
})
export class AppComponent {
changeText: boolean;
constructor() {
this.changeText = false;
}
}
import { Directive, OnInit, ElementRef, Renderer2 ,HostListener,HostBinding,Input} from '@angular/core';
import { MockNgModuleResolver } from '@angular/compiler/testing';
//import { Event } from '@angular/router';

@Directive({
selector: '[appBetterHighlight]'
})
export class BetterHighlightDirective implements OnInit {
defaultcolor :string = 'black'
Highlightedcolor : string = 'red'
@HostBinding('style.color') color : string = this.defaultcolor;

constructor(private elm : ElementRef , private render:Renderer2) { }
ngOnInit()
{}
@HostListener('mouseenter') mouseover(event :Event)
{

this.color= this.Highlightedcolor ;
}
@HostListener('mouseleave') mouseleave(event: Event)
{

this.color = this.defaultcolor;
}
}
<div (mouseover)="changeText=true" (mouseout)="changeText=false">
<span [hidden]="changeText">Hide</span>
<span [hidden]="!changeText">Show</span>
</div>
changeText:boolean=true;
To avoid blinking problem use following code
its not mouseover and mouseout instead of that use mouseenter and mouseleave


**app.component.html**

<div (mouseenter)="changeText=true" (mouseleave)="changeText=false">
<span *ngIf="!changeText">Hide</span>
<span *ngIf="changeText">Show</span>
</div>

**app.component.ts**

@Component({
selector: 'app-main',
templateUrl: './app.component.html'
})
export class AppComponent {
changeText: boolean;
constructor() {
this.changeText = false;
}
}
div span.only-show-on-hover {
visibility: hidden;
}
div:hover span.only-show-on-hover {
visibility: visible;
}
<div *ngFor="let i of [1,2,3,4]" > hover me please.
<span class="only-show-on-hover">you only see me when hovering</span>
</div>

Leave a Comment