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



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 = [];

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 = !;

Step 6: Add  Student

addStudent() {
    let stud: Student = {
      address: this.address,
      hobbiess: this.hobbiess,
      dob: this.dob,
      gender: this.gender,

Step 7:  Code for clear textboxes

clearData() {''; = '';
    this.address = '';
    this.hobbiess = '';
    this.dob = '';
    this.gender = ''; = ''; = '';

Step 8: Fetch data for update the student details

getFatchData(id: any) {
  let i = this.student.find((i: { id: any }) => == id); =; =;
  this.address = i.address;
  this.hobbiess = i.hobbiess;
  this.dob = i.dob;
  this.gender = i.gender; =; =;

Step 9: Update Student

updateStudent(id: number) {
    if (id == {
      let i = this.student.find((i: { id: any; }) => == id); =; =;
      i.address = this.address;
      i.hobbiess = this.hobbiess;
      i.dob = this.dob;
      i.gender = this.gender; =; =;
      this.http.put<Student>(, 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) {
    } else {

Step 12: In student.component.html (For Student Grid)

<div class="container">
        <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 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 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 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>
            <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 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 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 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 class="row">
                <div class="col-md-6"></div>
                <button class="btn btn-primary" [disabled]="!studentForm.form.valid">Submit</button>
<div class="container">
        <table border="2">
                <th>Date Of Birth</th>
                <tr *ngFor="let stud of student">
                        <button class="btn btn-primary" (click)="getFatchData(">Update</button>&nbsp;&nbsp;
                        <button class="btn btn-primary" (click)="deleteStudent(">Delete</button>

Step 13: Now, Run the project

npm start

Submit a Comment

Your email address will not be published. Required fields are marked *


Select Categories