Angular is an MVC-based framework Managed & Developed by Google. Angular application is a design framework and its development platform is for creating efficient and sophisticated single-page apps. Angular is open-source so everyone can use it. So, here we are going to see CRUD Operation in Angular 11 using the interface.
Step 1: Create a new Project using below command
ng new angular-crud-interface
Step 2: Install node_modules
npm install
or
yarn
Step 3: Add component using below command
ng g c student
Step 4: Create an interface
export interface Student {
id: string;
name: string;
address: string;
hobbiess: string;
dob: Date;
gender: string;
email: string;
phone: string;
}
Step 5: In student.component.ts
import { Component, OnInit } from '@angular/core';
import { FormGroup} from '@angular/forms';
import { hobbiesApi } from './dropDown';
import { HttpClient } from '@angular/common/http';
import { Student } from './student';
student: Student[] | any = [];
studentForm:FormGroup|any;
id: number | any;
name: string | any;
address: string | any;
hobbiess: string | any;
dob: Date | any;
gender: string | any;
email: string | any;
phone: string | any;
isAddMode: boolean | any;
constructor(private http: HttpClient) {}
ngOnInit(): void {
this.isAddMode = !this.id;
}
Step 6: Add Student
addStudent() {
this.isAddMode=true;
let stud: Student = {
id: this.id,
name: this.name,
address: this.address,
hobbiess: this.hobbiess,
dob: this.dob,
gender: this.gender,
email: this.email,
phone: this.phone
}
this.student.push(stud);
console.log(this.student);
this.clearData();
}
Step 7: Code for clear textboxes
clearData() {
this.id='';
this.name = '';
this.address = '';
this.hobbiess = '';
this.dob = '';
this.gender = '';
this.email = '';
this.phone = '';
}
Step 8: Fetch data for update the student details
getFatchData(id: any) {
let i = this.student.find((i: { id: any }) => i.id == id);
this.id = i.id;
this.name = i.name;
this.address = i.address;
this.hobbiess = i.hobbiess;
this.dob = i.dob;
this.gender = i.gender;
this.email = i.email;
this.phone = i.phone;
this.isAddMode=false;
}
Step 9: Update Student
updateStudent(id: number) {
if (id == this.id) {
let i = this.student.find((i: { id: any; }) => i.id == id);
i.id = this.id;
i.name = this.name;
i.address = this.address;
i.hobbiess = this.hobbiess;
i.dob = this.dob;
i.gender = this.gender;
i.email = this.email;
i.phone = this.phone;
console.log(this.student);
this.clearData();
this.http.put<Student>(this.id, this.student)
}
}
Step 10: Delete Student
deleteStudent(id: any) {
for (let i = 0; i < this.student.length; ++i) {
if (this.student[i].id === id) {
this.student.splice(i, 1);
}
}
}
Step 11: Add/Update Data
onSubmit() {
if (this.isAddMode) {
this.addStudent();
} else {
this.updateStudent(this.id);
this.isAddMode=true;
}
}
Step 12: In student.component.html (For Student Grid)
<div class="container">
<div>
<h1 *ngIf="isAddMode">Add User</h1>
<h1 *ngIf="!isAddMode">Edit User</h1>
<form #studentForm="ngForm" (ngSubmit)="studentForm.form.valid && onSubmit()">
<div class="form-group">
<label>StudentId:<abbr title="Student Id is required" class="text-danger" aria-label="required">*</abbr></label>
<input type="number" class="form-control" [(ngModel)]="id" name="id" placeholder="Enter id!!" required />
</div>
<div class="form-group">
<label for="fname">Name:<abbr title="Name is required" class="text-danger" aria-label="required">*</abbr></label>
<input type="text" id="fname" class="form-control" [(ngModel)]="name" name="name" placeholder="Enter Name!!"
required />
</div>
<div class="form-group">
<label for="address">Address:<abbr title="Address is required" class="text-danger" aria-label="required">*</abbr></label>
<textarea name="address" id="address" class="form-control" [(ngModel)]="address" placeholder="Address!!" required></textarea>
</div>
<div class="form-group">
<label>Hobbies:<abbr title="Select atleast 1" class="text-danger" aria-label="required">*</abbr></label><br>
<select [(ngModel)]="hobbiess" name="hobbiess">
<option value="0">--Select--</option>
<option value="Cooking">Cooking</option>
<option value="Dancing">Dancing</option>
<option value="Music">Music</option>
<option value="Reading">Reading</option>
<option value="Singing">Singing</option>
<option value="Writing">Writing</option>
</select>
</div>
<div class="form-group">
<label>Date Of Birth:<abbr title="BirthDate is required" class="text-danger" aria-label="required">*</abbr></label>
<input type="date" class="form-control" name="dob" [(ngModel)]="dob" required />
</div>
<div class="form-group">
<label>Gender:<abbr title="Gender is required" class="text-danger" aria-label="required">*</abbr></label><br>
<input type="radio" id="female" name="gender" [(ngModel)]="gender" value="Female">
<label for="Female">Female</label>
<input type="radio" id="male" name="gender" [(ngModel)]="gender" value="Male">
<label for="Male">Male</label><br>
</div>
<div class="form-group">
<label>Email Address:<abbr title="Email Address is required" class="text-danger" aria-label="required">*</abbr></label>
<input type="email" name="email" class="form-control" [(ngModel)]="email" placeholder="Email Address!!" title="Email" required/>
</div>
<div class="form-group">
<label>Mobile Number:<abbr title="Phone Number is required" class="text-danger" aria-label="required">*</abbr></label>
<input type="number" name="phone" class="form-control" [(ngModel)]="phone" placeholder="Mobile Number!!" required/>
</div>
<div class="row">
<div class="col-md-6"></div>
<button class="btn btn-primary" [disabled]="!studentForm.form.valid">Submit</button>
</div>
</form>
</div>
</div>
<br><br>
<div class="container">
<div>
<table border="2">
<thead>
<th>StudenId</th>
<th>Name</th>
<th>Address</th>
<th>Hobbies</th>
<th>Date Of Birth</th>
<th>Gender</th>
<th>Email</th>
<th>Phone</th>
<th>Actions</th>
</thead>
<tbody>
<tr *ngFor="let stud of student">
<td>{{stud.id}}</td>
<td>{{stud.name}}</td>
<td>{{stud.address}}</td>
<td>{{stud.hobbiess}}</td>
<td>{{stud.dob}}</td>
<td>{{stud.gender}}</td>
<td>{{stud.email}}</td>
<td>{{stud.phone}}</td>
<td>
<button class="btn btn-primary" (click)="getFatchData(stud.id)">Update</button>
<button class="btn btn-primary" (click)="deleteStudent(stud.id)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Step 13: Now, Run the project
npm start
