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

[StoyanZhulev]

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: #429 and #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

[olegpix]

@StoyanZhulev Hi,
If you're encountering issues with automatic initialization when using structural directives like *ngIf, one way to solve it is to manually initialize the component through the constructor. This ensures that the component is created and configured only when the element is available in the DOM.

Instead of relying on automatic initialization, you can create an instance of the component using the constructor and pass the necessary options directly. This allows you to initialize the component at the appropriate time, avoiding issues caused by the element being unavailable initially. I'm not a big Angular expert, but it seems that this approach should work:

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
declare const HSPinInput: any;

@Component({
  selector: 'app-pin-input',
  template: `<div #pinInputElement></div>`,
})
export class PinInputComponent implements AfterViewInit {
  @ViewChild('pinInputElement') pinInputElement!: ElementRef;

  private pinInputInstance: any;

  ngAfterViewInit(): void {
    this.pinInputInstance = new HSPinInput(this.pinInputElement.nativeElement, {
      availableCharsRE: '^[0-9]+$'
    });
  }
}

[sureMOISE]

@olegpix I have a similar issue with a treeView...tried following your example but seems not to work (I'm doing something wrong for sure) could you help me providing a similar example with a TreeView component? thanks in advance.
In particular how is it possibile to, in a treeView with checkboxes, to pre-check some defined items and trigger, for example, an indeterminate one?

[StoyanZhulev]

@sureMOISE Even if you initialise it manually like olegpix suggests you should do it in the appropriate time - if your treeView is in an if statement or something else, you should initialise it after it is rendered. I guess if your condition changes you must do it all over again, which is the same as using HSStaticMethods.cleanCollection(); and HSStaticMethods.autoInit(); every time the condition changes(that's what I did to go around this problem). As for the treeView specifics I can't help because I haven't used it.