Question:

A complete guide for CRUD operation in Angular using model popup

This blog will help you perform a CRUD operation in Angular using a model popup. Read our blog, If you want to create a >backend for CRUD app using NodeJS, ExpressJS, and MongoDB.

Step 1: Type the following command and add a class model with a shared folder

ng g class shared/user --type=model

Step 2: Now 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;

}

Step 3: After this, 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 that you have added services, add user detail components

ng g c userdetail

Note:

g - generate

c - component

s - service

Adding Bootstrap

Now, navigate 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>

To register services and modules, we now open app.module.ts. We have all the components automatically added to the app.module. However, to use them in our angular app, we must add a service. We must also include the 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:

>Create a basic Web Application with Angular

>How to add number together and despite using parseFloat I still get NaN

>Ionic 6 AppState change causing duplicate subscription results

>How to Focus shifting between array of standard <input> controls?

>Mat Paginator not working for Mat table in Angular

>How can I filter operator in rxjs and subscribe in Angular

Angular

Adequate Infosoft

Your Answer

Submit

Adequate Infosoft

0 Answers

Top Questions

Adequate Infosoft

0 Answers

Top Questions

Related Questions