[Angular] Dealing with angular routing and initTE()?

[nac0n]

Angular/cli version: 13.3.9
NodeJS version: 16.13.2
TE Elements version: 1.0.0

I'm trying to load the "Ripple" class with the ES init method so that my buttons can have a ripple effect. It works fine when I'm putting initTE({Ripple}) in the same component folder as where I'm using a button. But doing it like this means i have to use initTE({Ripple}) for every component that I want to use the Ripple class in.

Is there any way to load the Ripple for all the components in my shared project as illustrated in below diagram?

So far I've tried to export the shared button-component, importing the shared.module to my root module and hoping it would fix the issue. Which it doesn't. Any idea on how I can make it work?

In summary; I can't show my code as this is enterprise code but i'm trying to use ripple in a button using data-te-ripple-init , but the ripple effect isn't working as the ESinit method is not reaching the component I am trying to use the button in (or the shared button component for that matter).

[juujisai]

Did you try to call the initTE method in one of the main components after the component mounts? Or maybe listening for the DOMContentLoaded event and using the initTE method there?

[juujisai]

Did you try using the initTE method with allowReinits options in other hooks? That option often solves the issues with routing when used inside lifecycle hooks that react on content change/mounting. Maybe calling the initTE method inside the ngOnChanges would work?

You can try using document.queryListener and look for elements that contain data-te-ripple-init attributes. Maybe they are not yet present in your app / changing route? Or the method initTE is not beeing called again when the component mounts back.

The initTE method is checking the document, whether there is an element with attribute data-te-ripple-init. For each element it finds, it will initialize the ripple effect. The method after initializing Ripple is adding it to the list of already initialized components and won't initialize it again. By adding the allowReinits we are skipping adding/checking whether the component was already initialized.

[nac0n]

I tried initTE( { Ripple, Button }, { allowReInit: true } ); in ngOnChanges(); but it didn't load anything either.
Is there a thing as document.queryListener? Can't seem to find any documentation on that on MDN.

I can't get this to work...
I'm going to set the initTE(); method on every component that needs it instead.
To minimize my efforts, I'm letting all my custom components inherit an "init" class that calls the initTE(); method for them.

But, I'm not very fond of it, if the call runs every time I load a component that implements the initiation-component then it's bad optimization...

(P.S I can't seem to set up a stackblitz that runs well with TW-elements either so I can't show an example on how i'm trying to implement things..)

[juujisai]

I mean't querySelector . My bad 🤦‍♂️

I guess if nothing else works you can try to call the initTE method everywhere it needs to. You can also try to calling it via new Ripple(...) if you encounter problems with multiple instances of Ripple running at the same time. Did you try to create a component just for button, where you would initiate the Ripple via new Ripple(...) or initTE ? That could be reusable and maybe it would work here.

[nac0n]

I made a component called te-initiator.component, which sole purpose is to provide the initTE({ Button, Ripple, Dropdown}); call, leaving out the allowReinits option, so that it doesn't initiate the call several times. I'm then extending this te-initiator.component to every child that needs the ES init.

This works i suppose, but it would rather feel better if the call is made once, even when dealing with angular routing.

Initiator:

export class TEInitiatorComponent implements OnInit {
  constructor() { }

  ngOnInit() {
    initTE({ Button, Ripple });
  }
}

Used in:

export class ButtonOutlineComponent extends TEInitiatorComponent {
  constructor() {}
}