How to show success or failure message in angular? - html

Question

user.component.html
<form #ff="ngForm">
<input type="text" name="fname" placeholder="User Name" [(ngModel)] = "selectedUser.fname"/><br/><br/>
<input type="number" name="age" placeholder="age" [(ngModel)] = "selectedUser.age"/><br/><br/>
<input type="radio" name="sex" value="male" [(ngModel)] = "selectedUser.sex"/> Male<br/><br/>
<input type="radio" name="sex" value="female" [(ngModel)] = "selectedUser.sex"/> Female<br/><br/>
<input type="button" name="submit" value="submit" (click)="createUserData(ff.value)">
</form>
user.component.ts
import { Component, OnInit } from '#angular/core';
import { UserService } from '../../service/user.service';
#Component({
selector: 'app-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
constructor(private us:UserService) { }
user: any;
selectedUser: any = {fname:null, age: null, sex: null};
ngOnInit(): void {
}
createUserData(ff){
this.us.createform(ff).subscribe((user:any)=>{
console.log("Success register");
});
}
}
I am new in angular and I am trying to insert form data in database using web API to mysqli which is working fine. Now, I want to show success or failure message in my user.component.html page. I want when I click on submit button the page reload and show success or failure message. So, How can I do this please help me.
Thank you

Answer 1

You don't need to reload the page. You can choose to navigate to another component/page, or you can show a Popup dialog or you could render ad different content.
here a very simple example in order to render a different content:
registerSucess:boolean = false;
createUserData(ff){
this.us.createform(ff).subscribe((user:any)=>{
console.log("Success register");
this.registerSucess=true;
});
}
and in the tempalte:
<form #ff="ngForm" *ngIf="!registerSucess">
<input type="text" name="fname" placeholder="User Name" [(ngModel)] = "selectedUser.fname"/><br/><br/>
<input type="number" name="age" placeholder="age" [(ngModel)] = "selectedUser.age"/><br/><br/>
<input type="radio" name="sex" value="male" [(ngModel)] = "selectedUser.sex"/> Male<br/><br/>
<input type="radio" name="sex" value="female" [(ngModel)] = "selectedUser.sex"/> Female<br/><br/>
<input type="button" name="submit" value="submit" (click)="createUserData(ff.value)">
</form>
<h1 *ngIf="registerSucess"> Register Success :D </h1>
or you could use the variavle userinstead of registerSuccess, might be simpler

Answer 2

Create a string variable in user.component.ts to hold the message
export class UserComponent implements OnInit {
message = '';
...
Add an element to the html to contain the message, I'll use a <p>. Double curly brackets {{ }} allow you to insert a variable from the component.
<p>{{message}}</p>
Now simply updating the message in the component will update the html
createUserData(ff){
this.message = "Creating User Data..."
this.us.createform(ff).subscribe((user:any)=>{
this.message = "Success!"
});
}

Answer 3

In your code:
this.us.createform(ff).subscribe((user:any) => {
console.log("Success Register")
});
The code in the 'subscribe' delta function is executed every time a response is received through the 'createform' function. So here you can input some sort of mechanism to trigger you popup.
You need a popup window to be shown, which comes down to what sort of UI components you are using. The popup can be written in your html, and only shown through a flag that you activate in the subscribe delta function, and then disable when pressing or closing the popup.
I'd recommend using something like bootstrap for UI components.