0

So I'm almost entirely self-taught and am probably not using all the best practices, and maybe that's the cause of my trouble. Basically I'm using jQuery to change an element's opacity on mouse over. I'd like for that opacity to be "reset" (return to 0) when I navigate away from that component, so the jQuery event has to be executed again each time.

I've tried making the change in ngOnDestroy (I assume this would be the appropriate lifecycle hook to do so) by modifying the elements directly with something like document.getElementsById()... (I know that must be a terrible approach).

I've tried researching a way to "reset" the CSS with jQuery but don't know how to even approach that.

The jQuery is in a script tag in my index.html file:

$('.parent').mouseover(function() {
          $('.children').animate(
            {
              opacity: 1.0
            },
            1250,
            function() {}
          )
        })

Now when I navigate back to this page and the component is rendered again, .children should have an opacity of 0, but they are visible.

Is there any easy solution to this? Or is there a much better way to achieve what I'm trying to do in the first place? I have other jQuery in my index.html that I'm also using for various Materialize CSS purposes. If there is a much better best practice approach, I'd like to know.

Andrew
  • 1
  • as a recommendation: Don't mix angular and jquery. Check [this post](https://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) that although references angularjs (not angular), the main concepts are the same – Gonzalo.- Apr 11 '19 at 21:13

1 Answers1

0

Why are you using jQuery with angular7? Surely there is a way to not have to do this.

Also you can use variables in your TS file and toggle them on and off in different lifecycle hooks.

i.e

private childrenVisible = false;

...

ngOnInit() {
    this.childrenVisible = true
}

...

ngOnDestroy() {
    this.childrenVisible = false
}

Then in your template html you can add the following to your children items [ngClass]={'is-active':childrenVisible}

Joel Pierre
  • 31
  • 8