How To Add And Delete Data In Angular

Add and delete operations are used to store and remove data from the database. If the user wants to add the data then the user has to perform the post-operation and if the user wants to remove the data from the database then the user has to perform the delete operation. 
 
In this article, I have done both operations on a page using the add and delete button. 
 
First, you have to create a project using the command ng new demo.
 
Then open this project with terminal and add a component using command ng new c component name. When you create a component using comment then your project automatically registers your component in the module. After adding this component name open this component and create a form in the .html file. After creating a form you have to create a label for showing which message you have to want to print with the text box. Then you have to create a text field where the user enters the details. After creating the text field and the label, you have to create two buttons one button is for submitting the value, and the second button for deleting the value. and then create a function on the submit and delete button and then close the form.
 
Then go to the .ts file and then create both functions which function we create in the HTML form. After creating these function user has to create a query for adding and deleting the data. After completing the query, you have to go to the HTML page again and take a div <div></div> and then use a for loop to display the all values on the browser in the div using the key value. After completing this process you have to go to the .css page and modify the view of your application. Then go to the module file and check if all components and dependencies are registered or not. 
 
process.Component.html
  1. <form (submit)='AddTodo()'>  
  2.     <input    
  3.         type="text"    
  4.         name="inputTodo"    
  5.         placeholder="Enter ToDo Text Here For Test....."    
  6.         class="todo-input"[(ngModel)]="inputTodo">  
  7.         <input type="submit" value="Add Todo" class="todo-submit" >  
  8.         </form>  
  9.         <div *ngFor="let todo of todos; let i = index;"  class="todo {{(todo.completed ? 'done' : '' )}}">  
  10.             <div class="id">{{i}}</div>  
  11.             <div class="content" (click)="toogleDone(i)">{{todo.content}}</div>  
  12.             <button class="delete" (click)="deleteTodo(i)">remove</button>  
  13.         </div>    
Now open the .ts file and write the code and create the function you have to create on submit button and delete button. And then create a query in these functions. Code will be shown like this:
 
process.component.ts
  1. import { Component, OnInit } from '@angular/core';  
  2. import { Todo} from './../models/Todo'  
  3.   
  4. @Component({  
  5.   selector: 'app-todo',  
  6.   templateUrl: './todo.component.html',  
  7.   styleUrls: ['./todo.component.css']  
  8. })  
  9. export class TodoComponent implements OnInit {  
  10.   
  11.   inputTodo:string='';  
  12.   title='todo app';  
  13.   todos:Todo[];  
  14.   
  15.   constructor() { }  
  16.   
  17.   ngOnInit(): void {  
  18.     this.todos = [  
  19.       {  
  20.         content:'first todo',  
  21.         completed:false  
  22.       },  
  23.       {  
  24.         content:'second todo',  
  25.         completed:true  
  26.       }  
  27.     ]  
  28.   }  
  29. toggleDone(id:number){  
  30.   this.todos.map((v,i) =>{  
  31.     if(i==id) v.completed = !v.completed;  
  32.     return v;  
  33.   })  
  34. }  
  35. deleteTodo(id:number){  
  36.   this.todos = this.todos.filter((v , i) => i !==id);  
  37.   
  38.   
  39. }  
  40. AddTodo(){  
  41.   this.todos.push({  
  42.     content:this.inputTodo,  
  43.     completed:false  
  44.   });  
  45.   this.inputTodo="";  
  46. }  
  47. }  
Now add to the CSS to make an attractive view of your project.
 
component.css
  1. .todo{  
  2.     display: flex;  
  3.     padding10px 15px;  
  4.     background-color#fff;  
  5.     border-bottom1px solid #dddd;  
  6.   
  7. }  
  8. .todo:nth-child(even){  
  9.   
  10.     background-color#dddd;  
  11. }  
  12. .todo:last-of-type{  
  13.     border-bottom0;  
  14. }  
  15. id{  
  16.     flex:1 1 50px;  
  17. }  
  18. .content{  
  19.     flex: 1 1 100%;  
  20. }  
  21.   
  22. .content{  
  23.     text-decorationdashed;  
  24.       
  25. }  
  26. .todo-input{  
  27.     displayblock;  
  28.     width100%;  
  29.     padding10px 15px;  
  30.     appearance: none;  
  31.     bordernone;  
  32.     background-color#f3f3f3;  
  33.     margin-top15px;  
  34.     font-size20px;  
  35.     outlinenone;  
  36. }  
  37.   
  38. .todo-submit{  
  39.     displayblock;  
  40.     width100%;  
  41.     max-width:200px;  
  42.     appearance: none;  
  43.     bordernone;  
  44.     outlinenone;  
  45.     backgroundnone;  
  46.     background-color#FE4880;  
  47.     color#fff;  
  48.     margin15px auto;  
  49.     padding10px 15px;  
  50.     font-size18px;  
  51.     font-weight700;  
  52. }  
Now go to the app component.html and write the code to display your output on the first.
 
You have to write the router outlet to renderthe page you want to first view.
 
appcomponent.html
  1. <div class="todo">    
  2.   <header>    
  3.     <h2> Todo List</h2>    
  4.   </header>    
  5.       
  6. </div>    
  7. <br>    
  8. <router-outlet></router-outlet>     
appcomponent.ts
  1. import { Component } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-root',  
  5.   templateUrl: './app.component.html',  
  6.   styleUrls: ['./app.component.css']  
  7. })  
  8. export class AppComponent {  
  9.   title = 'todo app ';  
  10. }  
module.ts
  1. import { NgModule } from '@angular/core';  
  2. import { FormsModule } from '@angular/forms';  
  3. import { BrowserModule } from '@angular/platform-browser';  
  4.   
  5. import { AppRoutingModule } from './app-routing.module';  
  6. import { AppComponent } from './app.component';  
  7. import { TodoComponent } from './Todo/todo.component';  
  8. import { RegisterComponent } from './register/register.component';  
  9. import { SearchComponent } from './search/search.component';  
  10. import { RouterModule, Routes} from '@angular/router';  
  11. import{ HttpClientModule} from '@angular/common/http'  
  12. const routes: Routes = [  
  13.   
  14.   {path:'', component:TodoComponent},  
  15.   { path:'additem', component:RegisterComponent},  
  16.   {path:'search', component:SearchComponent},  
  17.   { path: '**', component:TodoComponent}  
  18. ];  
  19. @NgModule({  
  20.   declarations: [  
  21.     AppComponent,  
  22.     TodoComponent,  
  23.     RegisterComponent,  
  24.     SearchComponent  
  25.   ],  
  26.   imports: [  
  27.     BrowserModule,  
  28.     AppRoutingModule,FormsModule, RouterModule.forRoot(routes),HttpClientModule  
  29.   ],  
  30.   providers: [],  
  31.   bootstrap: [AppComponent]  
  32. })  
  33. export class AppModule { }  
 main.ts
  1. import { enableProdMode } from '@angular/core';  
  2. import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';  
  3.   
  4. import { AppModule } from './app/app.module';  
  5. import { environment } from './environments/environment';  
  6.   
  7. if (environment.production) {  
  8.   enableProdMode();  
  9. }  
  10.   
  11. platformBrowserDynamic().bootstrapModule(AppModule)  
  12.   .catch(err => console.error(err));  
index.ts
  1. <!doctype html>    
  2. <html lang="en">    
  3. <head>    
  4.      <meta charset="utf-8">    
  5.         <title>Todo</title>    
  6.         <base href="/">    
  7.      <meta name="viewport" content="width=device-width, initial-scale=1">    
  8.   <link rel="icon" type="image/x-icon" href="favicon.ico">    
  9. </head>    
  10.    <body>    
  11.      <app-root></app-root>    
  12.    </body>    
  13. </html>    
Now compile this project using the command “ ng serve”. After compiling successfully you have to run this project on the browser using the command “ localhost:4200”. After 1or 2 seconds you can see the output like this.
 
OUTPUT
 
 
Now you can see that there are two values thar we add to the code. Now you have to add a few values to this application. 
 
 
Now press the add todo button and add more value. After adding more value to the application the output will be shown like this,
 
 
Now you can see that there are no values added in the application. 
 
Now delete the value using the remove button.
 
 
After deleting some values the output will be shown like this,
 
 
Now you can see that there are only two values. We have deleted the multiple values. and both of our buttons work properly.
 
I hope you enjoy this article.
 
To learn more about angular follow me on Chaman Gautam and to learn about more technology follow C# Corner.
 
Thank you.