Initalizing value of a jqxInput

[fredclement91Participant]

Hi,

I am trying to initialize the content of a jqxInput on ngAfterViewInit event.
The field stays empty.
If I do execute the same code on a click event of a button, it works.
What am I doing wrong ?

app.component.ts

import { Component, ViewChild, AfterViewInit, OnInit, ElementRef, Input } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { jqxWindowComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxwindow';
import { jqxInputComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxinput';
import { jqxButtonComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxbuttons';
import { jqxPasswordInputComponent } from 'jqwidgets-framework//jqwidgets-ts/angular_jqxpasswordinput';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})

export class AppComponent implements OnInit, AfterViewInit {
    @ViewChild('windowReference') window: jqxWindowComponent;
    @ViewChild('jqxWidget') jqxWidget: ElementRef;
    @ViewChild('loginReference') f_input: jqxInputComponent;

    login_disabled: true;

    ngAfterViewInit(): void {
      this.f_input.val('whatever');
    }

    ngOnInit():  void {

    }

    onEnter(): void {
      this.f_input.val('whatever');

    }
}

app.component.html

<jqxWindow #windowReference [showCloseButton]="false" [theme]="'darkblue'" [isModal]="true" [width]="500" [height]="300" [maxHeight]="400" [minHeight]="200" [maxWidth]="700" [minWidth]="200" [showCollapseButton]="false" (onMoving)="onMoving()">
    <div #windowHeader>
        <span>
                    <img src="../assets/images/clefs.gif" style="margin-right: 15px; width:30px" />DOMOTEUS - Identification
        </span>
    </div>

    <div style="overflow: hidden;" #windowContent>
        <div style="background-color:white; height:100%; width:30%; float:left">
            <img src="../assets/images/clefs.gif" style="width:80%">
        </div>

        <div style="background-color: white;height:100%;width:70%;float:left">
            <table style="width:100%">
                <tr>
                    <td>
                        <h4>Identifiant :</h4>
                    </td>
                    <td>
                        <jqxInput #loginReference [height]="25" [placeHolder]="'Identifiant'" [source]="login"></jqxInput>
                    </td>
                </tr>
                <tr>
                    <td>
                        <h4>Mot de passe :</h4>
                    </td>
                    <td>
                        <jqxPasswordInput [height]="25" [placeHolder]="'Mot de passe'" [(ngModel)]="password"> </jqxPasswordInput>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td align='center'>
                        <font size='0.8em'><a href="#">Mot de passe oubli&eacute;</a></font>
                    </td>
                </tr>
            </table>
            <div style="width:100%;padding-top:30px; background-color:white;text-align: center;">
                <jqxButton (click)="onEnter()" [disabled]="login_disabled" [width]="120" [height]="30">Entrer</jqxButton>
            </div>
        </div>
    </div>

</jqxWindow>

[fredclement91Participant]

Answering to myself : the problem is solved using AfterViewChecked instead of AfterViewInit

Erratum :
Value is initialized, but field goes into read-only mdoe

So not solved.

[Ivo ZhulevParticipant]

Hi fredclement91,

Do this:

ngAfterViewInit(): void {
   setTimeout(_ => this.myInput.val('wahtevar'));
}

Best Regards,
Ivo

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

[Author]

Posts