CURD Application

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();
  }
}