Angular-Calling function result in HTML

Question

I have a function in my ts file:

makeid(length) {
    var result = '';
    var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    var charactersLength = characters.length;
    for ( var i = 0; i < length; i++ ) {
       result += characters.charAt(Math.floor(Math.random() * charactersLength));
    }
    return result;
 }

And what I want is to return result of this function in my html. I can call a funtion in html like:

<input [readonly]="true" formControlName="caseId" matInput placeholder="Radni nalog br:" value="{{ makeid(15) }}">

But every time I click anywhere, it changes the value, and I'm getting an error:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.

Mohamed Abdallah · Accepted Answer · 2021-03-14 17:00:29Z

2

Every time the component reloads it will change because the function will run again. To keep the value of the first call use a variable to store the value on ngOnInit()

Examle:


x: string;


ngOnInit(){

    this.x = makeid(15)

}


makeid(length) {
    var result = '';
    var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    var charactersLength = characters.length;
    for ( var i = 0; i < length; i++ ) {
       result += characters.charAt(Math.floor(Math.random() * charactersLength));
    }
    return result;
 }

And in the HTML:


<input [readonly]="true" formControlName="caseId" matInput placeholder="Radni nalog br:" [value]="x">

answered Mar 14, 2021 at 17:00

Mohamed Abdallah

1,0341 gold badge9 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amrit · Accepted Answer · 2021-03-14 15:27:17Z

0

You should use [( ngModel )] or put a variable in your component.ts file and change that variable with your function and html will change automatically:

something like this

 <input id="Last Name" name="Last Name" type="text" [(ngModel)]="user.lastName" />

this stackblitz will help you https://stackblitz.com/edit/angular-6-value-changes-v2?file=src%2Fapp%2Fapp.component.html

answered Mar 14, 2021 at 15:27

Amrit

2,1831 gold badge24 silver badges42 bronze badges

Collectives™ on Stack Overflow

Angular-Calling function result in HTML

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related