CURD Application

Posted By :Pawan Singh Nagarkoti |23rd May 2022

Angular is a framework of JavaScript. It is an open-source web application framework. Angular is supported by typescript language. angular.js and angular are completely different.
In this blog, we will create a Curd(create, update, read, delete) operation with the help of Angular.


Home page:


 
 Now, let's start to create a curd app with angular
 
 Step 1.
 We start from scratch, so first, install the angular application in our system.
 1.1 npm install -g @angular/cli
 1.2 ng new my-app
 1.3 cd my-app
 1.4 ng serve --open
 
 Step 2. 
 Now we will install bootstrap
 npm install bootstrap --save
 now let's integrate the bootstrap file with Angular.


 
 Step 3.


 3.1 Create an Html file


 <form [formGroup]='toDoForm'>
  <input type='text' name='item' formControlName='item' placeholder='enter your items!' autocomplete='off'>
  <button *ngIf='!isEditEnable' (click)='add()' [disabled]='toDoForm.invalid'>Add</button>
  <button *ngIf='isEditEnable' (click)='update()'>Update</button>
</form>

<ul *ngFor='let data of tasks let i=index'>
  <li>
    {{data.discription}}
    <button (click)='edit(data,i)'>edit</button>
    <button (click)='delete(i)'>delete</button>
  </li>
</ul>

 3.2 Create interface


 export interface objectData{
    discription:string
    // checkCondition:boolean
}


 3.3 Create Typescript File


 import { Component } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { objectData } from './objectData';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})


export class AppComponent {
  toDoForm !: FormGroup;
  tasks:objectData[]=[];
  // these two buttons are used  for edit
  updateIndex!:any;
  isEditEnable: boolean = false;

  constructor(private fb:FormBuilder){ }

  ngOnInit():void{
    this.toDoForm= this.fb.group({
      item: ['', Validators.required]
    })
  }


  // Added data into the arary.
  add(){
    this.tasks.push({
      discription: this.toDoForm.value.item,
    })
    this.toDoForm.reset();
  }

  // Delete data into the array.
  delete(i: number){
    this.tasks.splice(i,1);
    this.toDoForm.reset();
    this.isEditEnable=false;
  }


  // Edit data into the array.
  edit(item:objectData, i:number){
    this.toDoForm.controls['item'].setValue(item.discription)
    this.updateIndex = i;
    this.isEditEnable= true;
  }


  // Update data into the array.
  update(){
    this.tasks[this.updateIndex].discription= this.toDoForm.value.item;
    this.isEditEnable=false;
    this.toDoForm.reset();
  }
}
 


About Author

Pawan Singh Nagarkoti

Pawan is a highly skilled Frontend Developer with extensive experience in the industry. He stays up-to-date with the latest technologies, including Angular, JavaScript, React JS, HTML5, and CSS3. He has contributed to a diverse range of projects, including Konfer, KRB and Microsite (chatbot and ChatGPT). He consistently strives for excellence and delivers exceptional results in his work. He is passionate about exploring the internet and staying informed about the latest advancements in the ever-evolving world of technology. Pawan's commitment to continuous learning enables him to stay at the forefront of his field and deliver innovative solutions to his clients.

Request For Proposal

[contact-form-7 404 "Not Found"]

Ready to innovate ? Let's get in touch

Chat With Us