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]+$'
    });
  }
}