ngif prevents jqwidget from instantiating

[warpedghostParticipant]

I have a div class that contains an *ngIf. Inside the div is a jqxNumberInput. When the *ngIf is false the widget becomes undefined. When it becomes true again it fails to load because it is now undefined. I have the following:

<input name=”forceInactivityLogout” type=”checkbox” [(ngModel)]=”forceInactivityLogout” (change)=”forceInactivityLogoutChanged($event)”>

<div *ngIf=”forceInactivityLogout” class=”innerItem flexRowContainer”>
After  <jqxNumberInput #forceInactivityLogoutMinutes class=”nowrap”
[width]=”60″
[digits]=”3″
[min]=”4″
[max]=”999″
[spinButtons]=”true”
[decimalDigits]=”0″
[inputMode]=”‘advanced'”
(onChange)=”forceInactivityLogoutMinutesChanged($event)” [auto-create]=”false”>
</jqxNumberInput>
  Minutes
</div>

[Ivo ZhulevParticipant]

Hi warpedghost,

I’ve tried this code and it works fine:
app.components.ts

export class AppComponent {
    @ViewChild('forceInactivityLogoutMinutes') myNumberInput: jqxNumberInputComponent;

    ngAfterViewInit(): void {
        this.myNumberInput.createComponent({});
    }

    isVisible: boolean = false;

    enable(): void {
        this.isVisible = true;
    }
    disable(): void {
        this.isVisible = false;
    }
}

app.component.html

<button (click)="enable()">Enable</button>

<button (click)="disable()">Disable</button>

<div *ngIf="isVisible" >
  <jqxNumberInput #forceInactivityLogoutMinutes 
      [width]="60"
      [digits]="3"
      [min]="4"
      [max]="999"
      [spinButtons]="true"
      [decimalDigits]="0"
      [auto-create]="false">
  </jqxNumberInput>
</div>

The only difference is that you lazy load the widget(you’ve set auto-create to false). In order your logic to work you MUST have the jqxNumberInput component loaded before any interaction(you can see that in the example I’ve given you widget works okay, whatever the visible state is).

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[warpedghostParticipant]

Thank you for the quick reply. Removing the auto-create did resolve the undefined problem however the previous value that was placed in the numberInput is lost and goes back to the default 0. After disabling myNumberInput and then clicking on the enable button, if I try to access this.myNumberInput in the typescript method enable() the myNumberInput component is undefined. It’s as if the screen hasn’t rendered yet, thus hasn’t re-instantiated the myNumberInput which appears to be going into an undefined state when the flag is false for the div tag. Is there some event I can listen to for when a particular component has been instantiated or is no longer in an undefined state? Thank you.

[Ivo ZhulevParticipant]

Hi warpedghost,

Try this:

export class AppComponent {
    @ViewChild('forceInactivityLogoutMinutes') myNumberInput: jqxNumberInputComponent;

    isVisible: boolean = false;
    currentValue: string;

    enable(): void {
        this.isVisible = true;
        setTimeout(_ => this.myNumberInput.value(this.currentValue));
    }
    disable(): void {
        this.currentValue = this.myNumberInput.val();
        this.isVisible = false;
    }
}

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[warpedghostParticipant]

That’s exactly what I needed. Work perfectly.
Thank you.

[Author]

Posts