Angular login page result not updated immediately after login action

My LoginComponent:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
selector: 'app-login',
standalone: false,
templateUrl: './login.html',
styleUrls: ['./login.css']
})
export class LoginComponent {
userName: string='';
password: string='';
message: string='';

constructor(private http: HttpClient){}

onSubmit(){
this.message = '';
console.log('Login Submitted: ', this.userName, this.password);

const loginData = {
userName: this.userName,
password: this.password
};

this.http.post<{ message: string}>('http://localhost:9001/api/auth/login', loginData).subscribe({
next: (response) => {
this.message = 'Login successful!';
alert(this.message);
console.log('Success:',response);
},
error: (error) =>{
this.message = 'Login failed!';
alert(this.message);
console.error('Error:',error);
}
});
}
}


my login.html:

<h2>Login</h2>
<form #loginForm="ngForm" (ngSubmit)="onSubmit()">
<label>Username:</label>
<input [ngModel]="userName" (ngModelChange)="userName = $event" name="userName" required/>
<br /><br />
<label>Password:</label>
<input [ngModel]="password" (ngModelChange)="password = $event" name="password" type="password" required/>
<br /><br />
<button type="submit">Login</button>
</form>

<p>{{message}}</p>


And message is refreshed only after clicking on username files and password field, but alert in component shows immediate response on browser,how can i avoid this behavior and refresh message on html immediately

Continue reading...