I have this older Angular code which works but not in the latest version of Angular 6.
<div ng-mouseover="changeText=true" ng-mouseleave="changeText=false" ng-init="changeText=false">
<span ng-hide="changeText">Hide</span>
<span ng-show="changeText">Show</span>
</div>
How do i make this work for Angular 6? I understand I have to use (mouseover)
and (mouseout)
but I couldn't implement it successfully.
This question is related to
angular
<div (mouseenter)="changeText=true" (mouseout)="changeText=false">
<span *ngIf="!changeText">Hide</span>
<span *ngIf="changeText">Show</span>
</div>
and if you want to use in *ngFor then assign the object value of hover data and then check its id and show hover info/icon or anything like that:-
<div (mouseenter)="hoverCard(d)" (mouseleave)="hoverCard(null)" *ngFor="let d of data" class="col-lg-3 col-md-4 col-sm-6 mt-4">
<a *ngIf="hoverData && hoverData.id == d.id" class="text-right"><i class="fas fa-edit"></i>Hover Text</a>
Normal Text
</div>
in TS File
hoverData!:Data|null;
hoverCard(d: Data|null){
this.hoverData = sCatg;
}
CSS
solution works without a glitch!
https://www.w3schools.com/code/tryit.asp?filename=GJ4PCJMVQ4LN https://www.w3schools.com/code/tryit.asp?filename=GJ4PPLCCEBRG
.col-info:hover>.popoverIcon {
visibility: visible;
}
}
.popoverIcon {
visibility: hidden;
}
_x000D_
<div *ngFor="let i of [1,2,3,4]">
<div class="col-info">
<span class=" popoverIcon ">Show {{i}}</span>
</div>
</div>
_x000D_
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;
}
}
In HTML:
<div (mouseover)="funcName1() (mouseout)="funcName2()">
// Do what you want
</div>
In TypeScript:
funcName1(){
//Do Something
}
funcName2(){
//Do Something
}
You can use (mouseover)
and (mouseout)
events.
component.ts
changeText:boolean=true;
component.html
<div (mouseover)="changeText=true" (mouseout)="changeText=false">
<span [hidden]="changeText">Hide</span>
<span [hidden]="!changeText">Show</span>
</div>
If your interested , then go with directive property . Code might looks bit tough , but itshows all the property of Angular 6 . Here am adding a sample code
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;
}
}
Just use the selector name 'appBetterHighlight' anywhere in the template to access this property .
Adding to what was already said.
if you want to *ngFor
an element , and hide \ show elements in it, on hover, like you added in the comments, you should re-think the whole concept.
a more appropriate way to do it, does not involve angular at all.
I would go with pure CSS instead, using its native :hover
property.
something like:
App.Component.css
div span.only-show-on-hover {
visibility: hidden;
}
div:hover span.only-show-on-hover {
visibility: visible;
}
App.Component.html
<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>
added a demo: https://stackblitz.com/edit/hello-angular-6-hvgx7n?file=src%2Fapp%2Fapp.component.html
Source: Stackoverflow.com