htmlstreamofficial / preline

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
https://preline.co
Other
4.9k stars 309 forks source link

Preline plugin components are not working properly in Angular when used inside structural directives #505

Open StoyanZhulev opened 1 week ago

StoyanZhulev commented 1 week ago

Summary

When a plugin component is used inside of a structural directive (@if or @switch) and the condition is not initially "truthy", the components are not working properly. A way around this is to use autoInit every time there's a change that affects the component, but this can add other issues as stated in other Issues like: https://github.com/htmlstreamofficial/preline/issues/429 and https://github.com/htmlstreamofficial/preline/issues/443

Is a more convenient way planned to be implemented or we have to stick to cleanCollection and autoInit?

Steps to Reproduce

The Pin-input or Strong password components can be used as example. If it is rendered initially on the screen it works as expected and shown in the documentation. However if it is wrapped in a structural directive and shown at a later stage the component is not working properly. The visual styles are applied, but the behaviour is broken.

  1. Open the provided stackblitz - a fork of the official Angular demo with modified Pin-input and Strong password components to use structural directives
  2. Run "npm run start"
  3. Click on menu "Pin Input" or "Strong Password"
  4. You will see that the behaviour of the immediately rendered components is different from that of the ones rendered in a structural directives after some time.

Demo Link

Strong-password component: https://stackblitz.com/edit/preline-v2-angular-cgqjqi?file=src%2Fapp%2Fpages%2Fpin-input%2Fpin-input.component.ts,src%2Fapp%2Fpages%2Fpin-input%2Fpin-input.component.ts,src%2Fapp%2Fpages%2Fstrong-password%2Fstrong-password.component.html,src%2Fapp%2Fpages%2Fstrong-password%2Fstrong-password.component.ts

Pin-input component: https://stackblitz.com/edit/preline-v2-angular-cgqjqi?file=src%2Fapp%2Fpages%2Fpin-input%2Fpin-input.component.ts,src%2Fapp%2Fpages%2Fpin-input%2Fpin-input.component.ts,src%2Fapp%2Fpages%2Fstrong-password%2Fstrong-password.component.html,src%2Fapp%2Fpages%2Fpin-input%2Fpin-input.component.ts

Expected Behavior

The functional behaviour of the component to be the same as usual.

Actual Behavior

The functional behaviour of the component is broken.

Screenshots

No response