Angular 2 and Above CRUD App - Using Two Way Data binding

app.component.css:

Edit app.component.css

src/app/app.component.css

.studentForm{
    margin: 8px;
    border-radius: 4px;
    padding: 10px;
    display: inline-block;
    padding-left: 500px;
  }
  input.textBox {
    padding: 0;
    height: 30px;
    position: relative;
    left: 0;
    outline: none;
    border: 1px solid #cdcdcd;
    border-color: rgba(0,0,0,.15);
    background-color: white;
    font-size: 16px;
    padding: 0px 5px;
  }
  input,label{
    margin:  5px 0px;
  }
  .btnsubmit {
    background-color: rgb(24, 207, 115);
    border: none;
    color: white;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
  }
  .btndelete {
    background-color: red;
    border: none;
    color: white;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
  }
  .studentList {
      margin: 0 0 2em 0;
      list-style-type: none;
      padding: 0;
      width: 15em;
      padding-left: 500px;
    }
  .studentList li {
      cursor: pointer;
      position: relative;
      left: 0;
      background-color: palevioletred;
      margin: .5em;
      padding: .3em 0;
      height: 1.6em;
      border-radius: 4px;
    }
  .studentList li.selected:hover {
      background-color:black !important;
      color: white;
    }
  .studentList li:hover {
      color: black;
      background-color: #DDD;
      left: .1em;
    }
    .studentList .text {
      position: relative;
      top: -3px;
    }
    .studentList .badge {
      display: inline-block;
      font-size: small;
      color: white;
      padding: 0.8em 0.7em 0 0.7em;
      background-color:  rgb(24, 207, 115);
      line-height: 1em;
      position: relative;
      left: -1px;
      top: -4px;
      height: 1.8em;
      margin-right: .8em;
      border-radius: 4px 0 0 4px;
    }
    .selected {
        background-color: black !important;
        color: white;
      }

app.component.html

Edit app.component.html

src/app/app.component.html

<div style="text-align:center">
  <h1>
    Angular 2 and Above CRUD App - Using  Two Way Data binding
  </h1>
</div>
<div class="studentForm">
    <label>{{selectedStudent.StudentID == 0 ? "Insert Student":"Update Student"}}</label><br/>
  <input [(ngModel)]="selectedStudent.RollNo" class="textBox" placeholder="RollNo"><br/>
  <input [(ngModel)]="selectedStudent.Name" class="textBox" placeholder="Name"><br/>
  <button (click)="AddorEdit()" class="btnsubmit">Submit</button>
  <button *ngIf="selectedStudent.StudentID!=0" (click)="Delete()" class="btndelete">Delete</button>
</div>
<ul class="studentList">
<li *ngFor="let student of StudentCollection" (click)="OPenForEdit(student)" [class.selected]="student==selectedStudent">
<span class="badge">{{student.StudentID}}</span>{{student.RollNo}} - {{student.Name}}
</li>
</ul>

app.module.ts

Edit app.module.ts

Import the FormModule

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

App.component.ts

Edit the file src/app/app.component.ts

import { Component } from '@angular/core';


export class Student{
  StudentID:number;
  Name:string;
  RollNo:string;
}
const StudentArray:Student[]=[
  { StudentID: 1, Name: "Chandan Kumar", RollNo: "001" },
  { StudentID: 2, Name: "Ajeet Kumar", RollNo: "002" },
  { StudentID: 3, Name: "Rahul Kumar", RollNo: "003" },
]
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  StudentCollection=StudentArray;
  selectedStudent:Student={StudentID:0,Name:"",RollNo:""};
  OPenForEdit(student:Student): void{
this.selectedStudent=student;
  }
  AddorEdit(): void{
    if(this.selectedStudent.StudentID==0) //insert method
    {
      this.selectedStudent.StudentID = Math.max.apply(Math, this.StudentCollection.map(function (x) { return x.StudentID; })) + 1;
      this.StudentCollection.push(this.selectedStudent);
    }
    this.selectedStudent = { StudentID: 0, Name: "" , RollNo: ""};
  }
  Delete(): void{
    this.StudentCollection = this.StudentCollection.filter(x => x != this.selectedStudent);
    this.selectedStudent = { StudentID: 0, Name: "" , RollNo: ""};
  }
}