How to Add, Delete, Edit & Update Data in Angular

👉👉 How to Add, Delete, Edit & Update Data in Angular one by one👈👈

 If you try to understand very easily Add, Delete, Edit & Update data Angular. 

1)  How to add data from HTML input to show return HTML?

2)  How to Delete data from HTML?

3)  How to edit data using the same input field?

4)  How to update data in the same array using the same input field?

 You should check one by one HTML or typescript. You can understand. If you don't understand let me comment, I will explain it you to soon.

At first, you have to import "FormsModule" in "app.module.ts" in your.

app.module.ts

import { FormsModule } from '@angular/forms';

 imports: [

    FormsModule

  ],

 

.html

<div class="maindiv">

  <div class="subdiv">

    <h2>Todo List App</h2>

    <input type="text" placeholder="Add Todo" name="inputedata"

[(ngModel)]="inputedata">

    <button *ngIf="addText" class="btn"(click)="store()">Add Text</button>

    <button *ngIf="updatedBtn" class="btn"(click)="updateData()">Update</button>

  </div>

  <div class="subdivsecond">

    <ul class="adddata">

      <li id="itemid" *ngFor="let item of arData">{{item}}

        <button class="btn" (click)="delLiData(item)">Delete</button>

        <button class="btn" (click)="edit(item)">Edit</button>

      </li>

    </ul>

  </div>

</div> 

 

.ts

export class AppComponent {

  title = 'Your-App-Name';

  inputedata:any='';

  arData:any=[];

  updatedBtn=false;

  addText=true;

  editData:any;

store(){

this.arData.push(this.inputedata);

this.inputedata='';

}  

delLiData(item:any){

  //***You can delete any element form HTML/ dont need any argument ***/

  // let del:any=document.getElementById('itemid')

  // console.log(del)

  // this.arData.splice(del,1)

  //***You can delete any data to using splice form HTML/you need argument ***/

  let del:any=this.arData.indexOf(item);

  this.arData.splice(del,1);

  //***You can delete any data to using filter form HTML/you need argument ***/

  // this.arData=this.arData.filter((aitem:any)=>{

  //   return aitem!=item

  // })  

}

edit(item:any){

  let val:any=item;

  this.inputedata=val;  

  this.editData=val;

  this.updatedBtn=true;

  this.addText=false;

}

updateData(){

let sendData=this.arData.indexOf(this.editData)

let inUpData:any=this.inputedata;

 this.arData[sendData]=inUpData;

}

} 

 

 .css

*{margin: 0;padding: 0;}

.maindiv{

    background-color: antiquewhite;

    display: flex;

    flex-direction: column;

    width: 350px;

    padding: 20px;

    border: 10px solid red;

    border-radius: 10px;

    margin: auto;

    margin-top: 8%;

    box-shadow: 3px 10px 8px 10px #b8b2b2;

}

h2{

    text-align: center;

    padding: 10px;

    color: blue;

}

.subdiv{

    border: 1px solid rgb(212, 205, 205);

    background-color: #f8f2f2;

    padding: 5px;

    margin: auto;

    border-radius: 10px;

}

input{

    padding: 5px;

    margin-left: 15px;

}

.btn{

    padding: 5px;

    margin: 10px;

    color: rgb(252, 252, 252);

    background-color: black;  

    border-radius: 10px;

}

.subdivsecond{

    display: flex;

    border: 1px solid rgb(212, 205, 205);

    background-color: #f8f2f2;

    padding: 3px;

    margin-top: 25px;

    border-radius: 10px;

}

.adddata{

    background-color: white;

    flex-basis: 100%;

    border-left: 1px solid red;

    border-right: 1px solid red;

    margin: auto;

    color: blue;  

}

#itemid{

    list-style: none;

    color: rgb(10, 10, 10);

    margin-bottom: 5px;

    text-align: center;

}