How to use javascript code in Angular?

Question

I want to rotate element(clockwise on downscroll & anti-clockwise on upscroll) while scrolling the page. For that i use javascript code.But it's not working in angular.I just use the CDN links in index.html.Javascript code is not working in angular.Want to rotate starburst in top right corner

Html File:

<div class="starburst discount" id="star">
   <span>17%</span>
 </div>

My Javascript File is:

<script> 
var star = document.getElementById("star");
window.addEventListener("scroll", function() {
star.style.transform = "rotate("+window.pageYOffset+"deg)";
</script>

Is there any other way to achieve the element rotate in Angular?Can anyone help with this?Thanks in Advance..

I don't need rotating on hover.i want to achieve this when scrolling.Got it? — Arthi
– Arthi, Commented Jul 19, 2018 at 10:33
codepen.io/runamuk0/pen/OPNXyV. Just Modify click event to scroll in this sample — NullPointer
– NullPointer, Commented Jul 19, 2018 at 10:35
Its fine.where to include the js code in angular.I just gave the code inside the index.html file.but it does not work @NullPointer — Arthi
– Arthi, Commented Jul 19, 2018 at 10:44

NiK648 · Accepted Answer · 2018-07-19 11:04:41Z

2

Here is a working example of how to handle window scroll event in angular: https://stackblitz.com/edit/angular-3z533s. I have used HostListener to bind event handler to window scoll event. Refer: HostListener

answered Jul 19, 2018 at 11:04

NiK648

1,4921 gold badge11 silver badges19 bronze badges

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

19 Comments

Arthi Over a year ago

It's working.. But the problem is am displaying multiple products as in the above figure. The first element is alone rotate while scrolling rest of the list doesn't rotate.

Arthi Over a year ago

How can i achieve this for all starbursts in all products?

NiK648 Over a year ago

This will help you: stackoverflow.com/questions/43376081/…

Arthi Over a year ago

U r just amazing..I had been searching for this since morning..Thanks its working..

NiK648 Over a year ago

Happy to help:-)

|

Pankaj Kachhwaye · Accepted Answer · 2018-07-19 11:05:18Z

0

You can use angularjs Directive for DOM Manipulation Angular Directive

answered Jul 19, 2018 at 11:05

Pankaj Kachhwaye

791 silver badge5 bronze badges

2 Comments

Arthi Over a year ago

Am using Angular 6 version

Pankaj Kachhwaye Over a year ago

sorry i thought you were talking about angularjs

Collectives™ on Stack Overflow

How to use javascript code in Angular?

2 Answers 2

19 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

19 Comments

2 Comments

Linked

Related