A complete guide to Perform crud operation in angular using modal popup

We add a class model with a shared folder with the following command.

ng g class shared/user --type=model

Add property to the user.model.ts

export class User {

id:number= 0;

name!: string;

lastName:string='';

email:string = '';

age!:number;

gender:string='Male';

isActive!:number;

}

Add Services and Components:

Services

We will add a service that will communicate with a Web API inside the shared folder.

n g s shared/user

Components

Now, add userdetail components

ng g c userdetail

Note:

g - generate

c - component

s - service

Adding Bootstrap

Now, go to https://getbootstrap.com/docs/4.0/getting-started/introduction/ and copy the plugin of java script and CSS in index.html

<!doctype html>

<head>

<title>Angularcrudoperation</title>

</head>

<app-root></app-root>

</body>

</html>

Now, we open app.module.ts to register services and module. In app.module, we have all the components has been auto added. But, we need to add service so we can use them in our angular app. Also we need to add HTTP module.

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import {HttpClientModule} from '@angular/common/http'

import { FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import {MatTableModule} from '@angular/material/table'

import { MatSortModule } from '@angular/material/sort';

import {MatPaginatorModule} from '@angular/material/paginator';

import { UserComponent } from './user/user.component';

import {MatTableDataSource} from '@angular/material/table';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { UserdetailComponent } from './userdetail/userdetail.component';

@NgModule({

declarations: [

AppComponent,

UserComponent,

UserdetailComponent,

imports: [

BrowserModule,

AppRoutingModule,

MatTableModule,

MatSortModule,

MatPaginatorModule,

BrowserAnimationsModule,

HttpClientModule,

FormsModule

schemas:[CUSTOM_ELEMENTS_SCHEMA],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Adding services and components code:-

Service

Now, Open user.service.ts file and add code.

import { Injectable } from '@angular/core';

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

import { User } from './user.model';

import { Observable } from 'rxjs';

@Injectable({

providedIn: 'root'

})

export class UserService {

constructor(private myhttp:HttpClient) { }

userUrl:string ='https://localhost:44395/api/Customer/TblCustomer';

userPostUrl:string ='https://localhost:44395/api/Customer/PostCustomer';

userDeleteUrl = 'https://localhost:44395/api/Customer/DeleteCustomer';

userPutUrl = 'https://localhost:44395/api/Customer/UpdateCus';

listuser : User[] = [];

userdata : User = new User(); // for post data // insert data

saveUser()

{

// console.log("postapi",this.customerdata.imgfile);

return this.myhttp.post(this.userPostUrl,this.userdata);

}

updateUser()

{

return this.myhttp.post(this.userPutUrl,this.userdata);

}

getUser(): Observable<User[]>

{

return this.myhttp.get<User[]>(this.userUrl);

}

deleteUser(id:number)

{

return this.myhttp.delete(`${this.userDeleteUrl}/${id}`);

}

Now, Open userdetail.component.ts file and add code.

import { Component, OnInit } from '@angular/core';

import { User } from '../shared/user.model';

import { UserService } from '../shared/user.service';

import { NgForm } from '@angular/forms';

@Component({

selector: 'app-userdetail',

templateUrl: './userdetail.component.html',

styleUrls: ['./userdetail.component.css']

})

export class UserdetailComponent implements OnInit {

constructor(public userService:UserService) { }

displayStyle = "none";

openPopup() {

this.displayStyle = "block";

}

closePopup() {

this.displayStyle = "none";

}

ngOnInit() {

this.userService.getUser().subscribe(data=>{

this.userService.listuser=data

});

}

populateUser(selectedUser:User)

{

this.displayStyle = "block";

this.userService.userdata=selectedUser;

}

delete(id:number)

{

if(confirm('Are you really want to delete this record?'))

{

this.userService.deleteUser(id).subscribe(data=>{

console.log('Record delete');

this.userService.getUser().subscribe(data=>{

this.userService.listuser=data

});

err=>{

console.log('Error not deleted');

});

}

submit(form: NgForm) {

this.userService.userdata.isActive = form.value.isActive == true ? 1 : 0;

if (this.userService.userdata.id == 0) {

this.insertCustomer(form);

}

else {

this.updateCustomer(form);

}

insertCustomer(myForm: NgForm) {

this.userService.saveUser().subscribe(d => {

this.resetForm(myForm);

this.refreshData(myForm);

console.log('saved success');

});

}

updateCustomer(myForm: NgForm) {

this.userService.updateUser().subscribe(d => {

this.resetForm(myForm);

this.refreshData(myForm);

console.log('update success');

})

}

resetForm(myForm: NgForm) {

myForm.form.reset();

this.userService.userdata = new User();

}

refreshData(myForm: NgForm) {

this.userService.getUser().subscribe(res => {

this.userService.listuser = res;

});

}

Components (userdetail)

Now, Open the app.component.html and add app-user-details selector

Now, Open the userdetail.component.html and add code.

<button

style="margin: 100px; padding: 10px"

type="button"

class="btn btn-primary"

(click)="openPopup()">Add User

</button>

<div

class="modal"

tabindex="-1"

role="dialog"

[ngStyle]="{'display':displayStyle}">

</div>

</div>

</div>

</div>

<label for="email">Email</label>

</div>

</div>

<label for="gender">Gender</label>

<input type="radio" class="form-check-input" name="gender" #gender="ngModel" [(ngModel)]="userService.userdata.gender" value="Male">Male

</label>

</div>

<input type="radio" class="form-check-input" name="gender" #gender="ngModel" [(ngModel)]="userService.userdata.gender" value="Female">Female

</label>

</div>

</div>

</form>

</div>

<button type="button" class="btn btn-danger"

(click)="closePopup()">

</button>

</div>

<app-customer-form></app-customer-form>

</div>

<tr>

<th>Email</th>

<th>Gender</th>

<th>Action</th>

</tr>

</thead>

<tbody>

<td>{{us.lastName}}</td>

<td>{{us.email}}</td>

<td>{{us.gender}}</td>

<td>

Action

</button>

<a class="dropdown-item" href="#" (click)="delete(us.id)">Delete</a>

</div>

</td>

</tr>

</tbody>

</table>

Now , add the CSS to the app.component.css

table {

width: 100%;

}

.mat-mdc-form-field {

font-size: 14px;

width: 100%;

}

td, th {

width: 75px;

}

section {

display: table;

}

.example-label {

display: table-cell;

font-size: 14px;

margin-left: 8px;

min-width: 60px;

}

.example-button-row {

display: table-cell;

max-width: 300px;

}

.example-button-row .mat-mdc-button-base {

margin: 8px 8px 8px 0;

}

.example-flex-container {

display: flex;

justify-content: space-between;

flex-wrap: wrap;

}

.example-button-container {

display: flex;

justify-content: center;

width: 120px;

}

Now, run the project using the below command:

"ng serve -o" or "ng serve --open"

User Details:

Add user:

Edit user:

User detail after editing:

Delete user:

Technical chamber - Help , SDK and Code for Programmers

Pages

A complete guide to Perform crud operation in angular using modal popup

No comments:

Post a Comment

Make new Model/Controller/Migration in Laravel

Report Abuse

Labels