CRUD Operation In Angular Using Interface

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">&nbsp;&nbsp;
                    <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>&nbsp;&nbsp;
                        <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