In this part of tutorial, I’ll show you haw to make edit user in Popup / Modal. We will use NgBootsrap .
Install NgBootstrap
Here is a list of minimal required versions of Angular and Bootstrap CSS for ng-bootstrap:
| ng-bootstrap | Angular | Bootstrap CSS |
|---|---|---|
| 1.x.x | 5.0.2 | 4.0.0 |
| 2.x.x | 6.0.0 | 4.0.0 |
| 3.x.x | 6.1.0 | 4.0.0 |
| 4.x.x | 7.0.0 | 4.0.0 |
| 5.x.x | 8.0.0 | 4.3.1 |
| 6.x.x | 9.0.0 | 4.4.1 |
If you’re using Angular ≥ 9.0.0 and ng-bootstrap ≥ 6.0.0, you might also need to install the @angular/localize polyfill with ng add @angular/localize. See more details in the official documentation.
Installation
After installing the above dependencies, install ng-bootstrap via:
npm install --save @ng-bootstrap/ng-bootstrapOnce installed you need to import our main module.
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
...
imports: [NgbModule, ...],
...
})
export class YourAppModule {
}
Edit user Modal
Create a new component called “EditUser” and in side the html file paste this code:
<div class="modal-header bg-primary text-white">
<h4 class="modal-title" id="modal-basic-title">Update User</h4>
</div>
<div class="modal-body">
<form [formGroup]="editForm" (ngSubmit)="onSubmit()" *ngIf="editForm">
<div class="form-group row d-flex justify-content-center align-items-center">
<label for="firstName" class="col-form-label col-sm-2 text-right">First Name:</label>
<div class="col-sm-5">
<input type="text" formControlName="firstName" class="form-control" />
<div *ngIf="editFormData.firstName.invalid && (editFormData.firstName.dirty || editFormData.firstName.touched)"
class="alert-danger">
<span>First name is required!</span>
</div>
</div>
</div>
<div class="form-group row d-flex justify-content-center align-items-center">
<label for="lastName" class="col-form-label col-sm-2 text-right">Last Name:</label>
<div class="col-sm-5">
<input type="text" formControlName="lastName" class="form-control" />
<div *ngIf="editFormData.lastName.invalid && (editFormData.lastName.dirty || editFormData.lastName.touched)"
class="alert-danger">
<span>Last name is required!</span>
</div>
</div>
</div>
<div class="form-group row d-flex justify-content-center align-items-center">
<label for="email" class="col-form-label col-sm-2 text-right">Email:</label>
<div class="col-sm-5">
<input type="text" formControlName="email" class="form-control" />
<div *ngIf="editFormData.email.invalid && (editFormData.email.dirty || editFormData.email.touched)"
class="alert-danger">
<span *ngIf="editFormData.email.errors.required">Email is required!</span>
<span *ngIf="editFormData.email.errors.email">Email must be a valid address!</span>
</div>
</div>
</div>
<div class="form-group row d-flex justify-content-center align-items-center">
<label for="mobileNumber" class="col-form-label col-sm-2 text-right">Mobile number:</label>
<div class="col-sm-5">
<input type="text" formControlName="mobileNumber" class="form-control" />
<div *ngIf="editFormData.mobileNumber.invalid && (editFormData.mobileNumber.dirty || editFormData.mobileNumber.touched)"
class="alert-danger">
<span>Mobile number is required!</span>
</div>
</div>
</div>
<div class="modal-footer">
<button [disabled]="isLoading" class="btn btn-primary mr-2" (click)="modal.close('Cancel')">Cancel</button>
<button [disabled]="isLoading" class="btn btn-primary mr-2">Update</button>
</div>
</form>
</div>
<!-- <div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="modal.close('Yes')">Update</button>
<button type="button" class="btn btn-outline-dark" (click)="modal.close('Cancel')">Cancel</button>
</div> -->
So, here we make a form like always, the difference is to bind the cancel button click event to “modal.close(‘Cancel’)“.
In the typescript file insert this code:
import { Component, OnInit } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { UserModel } from 'src/app/models/user-model';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { UsersServiceService } from 'src/app/services/users-service.service';
@Component({
selector: 'app-edit-user',
templateUrl: './edit-user.component.html',
styleUrls: ['./edit-user.component.scss']
})
export class EditUserComponent implements OnInit {
selectedUser: UserModel;
editForm: FormGroup;
isLoading = false;
constructor(public modal: NgbActiveModal, private route: ActivatedRoute, private usersService: UsersServiceService, private formBuilder: FormBuilder, private router: Router) { }
ngOnInit() {
this.setForm()
}
onSubmit() {
if (this.editForm.invalid || this.isLoading) {
return;
}
this.isLoading = true;
this.usersService.updateUser(this.editForm.value).subscribe(x => {
this.isLoading = false;
this.modal.close('Yes');
},
error => {
this.isLoading = false;
});
}
get editFormData() { return this.editForm.controls; }
private setForm() {
console.log(this.selectedUser);
this.editForm = this.formBuilder.group({
id: [this.selectedUser.id],
firstName: [this.selectedUser.firstName, Validators.required],
lastName: [this.selectedUser.lastName, Validators.required],
email: [{ value: this.selectedUser.email, disabled: true }, [Validators.email, Validators.required]],
mobileNumber: [this.selectedUser.mobileNumber, Validators.required]
});
}
}
In the constructor, add public modal: NgbActiveModal decency. It have to be public because it’s used in HTML cancel Binding event.
The selectedUser property represents the data model. It’ll be initialized before the opening event of our modal.
Make sure that after the update user operation to call this.modal.close(‘Yes’)
in order to dismiss the modal.
In the parent component ‘manageUsers’ and in the editItem method, we need to open the edit user component like a modal. So we user the open method of NgModal.
editItem(userModel: UserModel) {
// this.router.navigateByUrl(`EditUser/${userModel.id}`);
const ref = this.modalService.open(EditUserComponent, { centered: true });
ref.componentInstance.selectedUser = userModel;
ref.result.then((yes) => {
console.log("Yes Click");
this.setUsersList();
},
(cancel) => {
console.log("Cancel Click");
})
}
Don’t forget to call this.setUsersList() to refresh the grid after the edit operation.
Run the project and enjoy editing your users.
Follow Me For Updates
Subscribe to my YouTube channel or follow me on Twitter or GitHub to be notified when I post new content.