change pointer using ngClass

Question

I'm adding and removing class using ngClass. I want to change pointer. My html code of the component

[ngClass]="{'zoom-cursor': cyClass}"

I have a boolean called cyClass in the corresponding typescript code of the same component.

My css code is .zoom-cursor { cursor: url(../src/assets/img/zoom-cursor.svg), pointer!important; }

If I'm moving mouse, the pointer image changes as expected. BUT if the mouse is not moving nothing changes. I want to see the changes immediately. It seems like angular is not rendering changes. I tried to trigger it manually but I couldn't find a way.

how are you changing the cyClass variable? through some click event on any HTML element? If you're changing the variable using click events, initially those HTML elements have there own cursor property which is getting applied, and hence you cannot see changes immediately, you need to apply [ngClass] to those HTML elements as well. In this fork I'm changing cyClass value through "Left button" click and applied [ngClass] to "Left button" as well - stackblitz.com/edit/angular-5r6u3p-nabsuj — Hemendra
– Hemendra, Commented Oct 10, 2019 at 13:44
AS Hemendra, I think you're changing the value of the variable "cyClass". Some time ago I went crazy because I use = and not == when filter an array — Eliseo
– Eliseo, Commented Oct 10, 2019 at 21:11
thanks for all the answers and comments. I could not understand but after I restarted the computer it SOMEHOW works as expected. I don't even call a method like detectChanges. PS the focus should be on the browser screen (if you click to delete console logs, after that you should click somewhere on browser) — canbax
– canbax, Commented Oct 11, 2019 at 5:49

mbojko · Accepted Answer · 2019-10-10 13:40:56Z

0

You can inject ChangeDetectorRef and manually trigger change detection:

constructor(private ref: ChangeDetectorRef) {}

// In code, where you the value of cyClass, call
this.ref.detectChanges();

answered Oct 10, 2019 at 13:40

mbojko

14.8k2 gold badges20 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

change pointer using ngClass

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related