How to uninstall CLI & install latest version of CLI

npm uninstall -g angular-cli // Use sudo before to give administrator permission
npm cache clean or npm cache clean --force
To reinstall the latest version try this
npm install -g @angular/cli@latest

below for angular5
npm uninstall -g angular-cli
npm cache clean
npm install -g @angular/cli@1.5
or

npm install -g @angular/cli@5.0.0 

date picker issue

npm install ngx-bootstrap@2.0.5 --save

CURD operation using angularjs6 , datatable & webapi2 with multiple delete.

WebApi Code :

using System;

using System.Collections.Generic;

using System.Data.Entity;

using System.Linq;

using System.Net;

using System.Net.Http;

using System.Web.Http;

using WebApplication5.Models;

namespace WebApplication5.Controllers

{

    [RoutePrefix("api/Testservice")]

    public class TestserviceController : ApiController

    {

        [Route("Alltests")]

        [HttpGet]

        public IHttpActionResult Alltests()

        {

            try

            {

                using (Database1Entities obj = new Database1Entities())

                {

                    return Ok(obj.TESTs.ToList());

                }

            }

            catch(Exception ex)

            {

                return InternalServerError(ex);

            }

        }

        [Route("Gets")]

        [HttpGet]

        public IHttpActionResult Gets()

        {

            try

            {

                using (Database1Entities obj = new Database1Entities())

                {

                    return Ok(obj.TEST1.ToList());

                }

            }

            catch (Exception ex)

            {

                return InternalServerError(ex);

            }

        }

        [Route("Get/{ID:int}",Name ="Test1")]

        [HttpGet]

        public IHttpActionResult Get(int ID)

        {

            try

            {

                using (Database1Entities obj = new Database1Entities())

                {

                    TESTVM vm = obj.TEST1.Select(p => new TESTVM { ID = p.ID, NAME = p.NAME }).FirstOrDefault(x => x.ID == ID);

                    List<int> d = obj.TEST2.Where(m => m.EID == ID).Select(p => p.TID.Value).ToList();

                    List<TEST> lst1 = obj.TESTs.Where(p => d.Contains(p.TID)).ToList();

                    List<TEST> lst2 = obj.TESTs.Where(p => d.Contains(p.TID) == false).ToList();

                    List<TEST> lst3 = lst1.Select(p => new TEST { TID = p.TID, TNAME = p.TNAME, STATUS = true }).ToList();

                    vm.TLIST = lst2.Union(lst3).ToList();

                    return Ok(vm);

                }

            }

            catch (Exception ex)

            {

                return InternalServerError(ex);

            }

        }

        [Route("Save")]

        [HttpPost]

        public IHttpActionResult Save(TESTVM vm)

        {

            try

            {

                using (Database1Entities obj = new Database1Entities())

                {

                    TEST1 ts = new TEST1();

                    ts.ID = vm.ID;

                    ts.NAME = vm.NAME;

                    obj.Entry(ts).State = EntityState.Added;

                    obj.SaveChanges();

                    obj.TEST2.AddRange(vm.TLIST.Where(p=>p.STATUS==true).Select(e => new TEST2 { EID=vm.ID, TID=e.TID }));

                    obj.SaveChanges();

                    return Created(new Uri(Url.Link("Test1", new { ID = vm.ID })), "Data Saved.");

                }

            }

            catch (Exception ex)

            {

                return InternalServerError(ex);

            }

        }

        [Route("Update/{ID:int}")]

        [HttpPut]

        public IHttpActionResult Update([FromUri]int ID,[FromBody]TESTVM vm)

        {

            try

            {

                using (Database1Entities obj = new Database1Entities())

                {

                    TEST1 ts = obj.TEST1.Find(ID);

                    ts.NAME = vm.NAME;

                    obj.Entry(ts).State = EntityState.Modified;

                    obj.SaveChanges();

                    obj.TEST2.RemoveRange(obj.TEST2.Where(e => e.EID == ID));

                    obj.SaveChanges();

                    obj.TEST2.AddRange(vm.TLIST.Where(e=>e.STATUS==true).Select(e => new TEST2 { EID = vm.ID, TID = e.TID }));

                    obj.SaveChanges();

                    return Ok("Data Updated.");

                }

            }

            catch (Exception ex)

            {

                return InternalServerError(ex);

            }

        }

        [Route("Delete/{ID:int}")]

        [HttpDelete]

        public IHttpActionResult Delete([FromUri]int ID)

        {

            try

            {

                using (Database1Entities obj = new Database1Entities())

                {

                    TEST1 ts = obj.TEST1.Find(ID);

                    obj.Entry(ts).State = EntityState.Deleted;

                    obj.SaveChanges();

                    obj.TEST2.RemoveRange(obj.TEST2.Where(e => e.EID == ID));

                    obj.SaveChanges();

                    return Ok("Data Deleted.");

                }

            }

            catch (Exception ex)

            {

                return InternalServerError(ex);

            }

        }

        [Route("DeleteAll")]

        [HttpPatch]

        public IHttpActionResult DeleteAll([FromBody]List<int> lst)

        {

            try

            {

                using (Database1Entities obj = new Database1Entities())

                {

                    obj.TEST1.RemoveRange(obj.TEST1.Where(e => lst.Contains(e.ID)));

                    obj.SaveChanges();

                    obj.TEST2.RemoveRange(obj.TEST2.Where(e => lst.Contains(e.EID.Value)));

                    obj.SaveChanges();

                    return Ok("All Data Deleted.");

                }

            }

            catch (Exception ex)

            {

                return InternalServerError(ex);

            }

        }

    }

}

Angularjs Model :

export interface Itest {
TID: number;
TNAME: string;
STATUS: Boolean;
}

export interface Itest1 {
ID: number;
NAME: string;
TLIST: Itest[];
}

export interface Itest2 {
    ID: number;
    NAME: string;
}

Angularjs Service Code :

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

import { HttpClient, HttpHeaders } from '@angular/common/http';

import { Itest, Itest1, Itest2 } from './ctc.model';

import 'rxjs/add/operator/toPromise';

@Injectable()

export class CtcService {

    constructor(private http: HttpClient) { }

    baseUrl = 'http://localhost:2813/api/Testservice';

    Getc(): Promise<Itest[]> {

        return this.http.get<Itest[]>(`${this.baseUrl}/${'Alltests'}`)

            .toPromise();

    }

    Gets(): Promise<Itest2[]> {

        return this.http.get<Itest2[]>(`${this.baseUrl}/${'Gets'}`)

            .toPromise();

    }

    Get(id: number): Promise<Itest1> {

        return this.http.get<Itest1>(`${this.baseUrl}/${'Get'}/${id}`)

            .toPromise();

    }

    Save(vm: Itest1): Promise<string> {

        return this.http.post<string>(`${this.baseUrl}/${'Save'}`

            , JSON.stringify(vm)

            , { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) })

            .toPromise();

    }

    Update(vm: Itest1): Promise<string> {

        return this.http.put<string>(`${this.baseUrl}/${'Update'}/${vm.ID}`

            , JSON.stringify(vm)

            , { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) })

            .toPromise();

    }

    Delete(id: number): Promise<string> {

        return this.http.delete<string>(`${this.baseUrl}/${'Delete'}/${id}`

            , { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) })

            .toPromise();

    }

    Deleteall(id: any): Promise<string> {

        return this.http.patch<string>(`${this.baseUrl}/${'DeleteAll'}`

            , JSON.stringify(id)

            , { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) })

            .toPromise();

    }

}

Angularjs Component :

import { Component, OnInit, ViewChild } from '@angular/core';

import { Itest, Itest1 } from './ctc.model';

import { CtcService } from './ctc.service';

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

import { Subject } from 'rxjs/Subject';

@Component({

  selector: 'app-createctc',

  templateUrl: './createctc.component.html',

  styleUrls: ['./createctc.component.css']

})

export class CreatectcComponent implements OnInit {

  TEST: Itest1;

  list = new Array();

  dtOptions: DataTables.Settings = {};

  dtTrigger: Subject<any> = new Subject();

  hcb: boolean;

  deleall = new Array();

  @ViewChild('frmTest') public frmTest: NgForm;

  constructor(private cs: CtcService) { }

  ngOnInit() {

    this.CLR();

    this.fill();

    this.dtOptions = {

      pagingType: 'full_numbers',

      pageLength: 2

    };

  }

  fillh(): void {

    this.list.forEach(element => {

      element.SELECTED = this.hcb;

    });

  }

  fillc(): void {

    this.hcb = this.list.every(function (item: any) {

      return item.SELECTED === true;

    });

  }

  CLR(): void {

    this.TEST = {

      ID: null,

      NAME: null,

      TLIST: []

    };

    this.frmTest.reset();

    this.cs.Getc().then(data => this.TEST.TLIST = data);

  }

  edit(id: number): void {

    this.cs.Get(id).then(data => {

      this.TEST = data;

    });

  }

  del(id: number): void {

    if (confirm('Do you want to delete it ?')) {

      this.cs.Delete(id).then(data => {

        alert(data);

        window.location.reload();

      });

    }

  }

  reset(): void {

    this.CLR();

  }

  fill(): void {

    this.list = new Array();

    this.cs.Gets().then(data => {

      for (let index = 0; index < data.length; index++) {

        this.list.push({ ID: data[index].ID, NAME: data[index].NAME, SELECTED: false });

      }

      this.dtTrigger.next();

    });

  }

  save(): void {

    this.cs.Save(this.TEST).then(data => {

      alert(data);

      window.location.reload();

    });

  }

  delall(): void {

  this.deleall = new Array();

    this.list.forEach(element => {

      if (element.SELECTED === true) {

        this.deleall.push(element.ID);

      }

      });

      if (this.deleall.length > 0) {

        if (confirm('Do you want to delete it ?')) {

          this.cs.Deleteall(this.deleall).then(data => {

            alert(data);

            window.location.reload();

          });

        }

      } else {

        alert('Please select atleast one item from the list.');

      }

  }

  update(): void {

    this.cs.Update(this.TEST).then(data => {

      alert(data);

      this.CLR();

      this.fill();

    });

  }

}

Angularjs View :

<form class="form-horizontal" #frmTest="ngForm">

  <div class="form-group" [class.has-error]="ID.invalid && ID.touched" [class.has-success]="ID.valid">

      <label class="control-label col-lg-4">ID</label>

      <div class="col-lg-4">

          <input type="text" class="form-control" [(ngModel)]="TEST.ID" #ID="ngModel" name="ID" required />

      </div>

      <span class="help-block" *ngIf="ID.invalid && ID.touched">

          ID should not be blank.

      </span>

  </div>

  <div class="form-group" [class.has-error]="NAME.invalid && NAME.touched" [class.has-success]="NAME.valid">

      <label class="control-label col-lg-4">NAME</label>

      <div class="col-lg-4">

          <input type="text" class="form-control" [(ngModel)]="TEST.NAME" #NAME="ngModel" name="NAME" required />

      </div>

      <span class="help-block" *ngIf="NAME.invalid && NAME.touched">

          Name should not be blank.

      </span>

  </div>

  <div class="form-group">

    <label class="control-label col-lg-4">HOBBY</label>

    <div class="col-lg-4">

        <div *ngFor="let c of TEST.TLIST;let i=index">

                <input type="checkbox"  [(ngModel)]="c.STATUS" #STATUS="ngModel" name="{{'STATUS'+i}}" [value]="c.TID" />{{c.TNAME}}

        </div>

    </div>

</div>

  <div class="form-group">

      <label class="control-label col-lg-4"></label>

      <div class="col-lg-4">

          <input type="button" class="btn btn-primary" value="Save" style="width:80px" (click)="save()" />

          <input type="button" class="btn btn-primary" value="Update" style="width:80px" (click)="update()" />

          <input type="button" class="btn btn-primary" value="Reset" style="width:80px" (click)="reset()" />

      </div>

  </div>

  <div class="form-group">

        <label class="control-label col-lg-4"></label>

        <div class="col-lg-8">

            <div style="border:1px solid #808080" >

                <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover  table table-bordered table-condensed table-hover table-responsive table-striped">

                        <thead class="bg bg-primary">

                            <tr>

                                <th style="text-align:center"><input type="checkbox" name="hcb" [(ngModel)]="hcb" (change)="fillh()" /></th>

                                <th>Sl No.</th>

                                <th>NAME</th>

                                <th>ACTION</th>

                            </tr>

                        </thead>

                        <tbody>

                            <tr *ngFor="let d of list; let i = index">

                                <td style="text-align:center"><input type="checkbox"  name="{{'cb'+i}}" [(ngModel)]="d.SELECTED" (change)="fillc()" /></td>

                                <td>{{i+1}}</td>

                                <td>{{d.NAME}}</td>

                                <td>

                                    <a (click)="edit(d.ID)">Edit</a> | 

                                    <a (click)="del(d.ID)">Delete</a>

                                </td>

                            </tr>

                        </tbody>

                    </table>

        </div>

    </div>

    </div>

    <div class="form-group">

        <label class="control-label col-lg-4"></label>

        <div class="col-lg-4">

            <input type="button" class="btn btn-primary" value="Delete All" style="width:90px" (click)="delall()" />

        </div>

    </div>

</form>

CURD operation using angularjs6 , datatable & webapi2

Web api Code :

using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using WebApplication5.Models;

namespace WebApplication5.Controllers
{
    [RoutePrefix("api/Bangaloreservices")]
    public class BangaloreservicesController : ApiController
    {
        [HttpGet]
        [Route("Countries")]
        public HttpResponseMessage Countries()
        {
            try
            {
                using (Database1Entities obj = new Models.Database1Entities())
                {
                    return Request.CreateResponse(HttpStatusCode.OK, obj.COUNTRies.ToList());
                }
            }
            catch(Exception ex)
            {
                return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, ex);
            }
        }
        [HttpGet]
        [Route("Sates/{CID:int}")]
        public HttpResponseMessage Countries(int CID)
        {
            try
            {
                using (Database1Entities obj = new Models.Database1Entities())
                {
                    return Request.CreateResponse(HttpStatusCode.OK, obj.STATEs.Where(e=>e.CID==CID).ToList());
                }
            }
            catch (Exception ex)
            {
                return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, ex);
            }
        }
        [HttpGet]
        [Route("Gets")]
        public HttpResponseMessage Gets()
        {
            try
            {
                using (Database1Entities obj = new Models.Database1Entities())
                {
                    return Request.CreateResponse(HttpStatusCode.OK , obj.BANGALORs.ToList());
                }
            }
            catch (Exception ex)
            {
                return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, ex);
            }
        }
        [HttpGet]
        [Route("Get/{DID:int}",Name ="BGET")]
        public HttpResponseMessage Get(int did)
        {
            try
            {
                using (Database1Entities obj = new Models.Database1Entities())
                {
                    BANGALORVM vm = obj.BANGALORs.Select(p => new BANGALORVM { DID=p.DID, NAME=p.NAME }).SingleOrDefault(e=>e.DID==did);
                    vm.LMANGALOR = obj.MANGALORs.Where(m => m.DID == did).ToList();
                    return Request.CreateResponse(HttpStatusCode.OK,vm);
                }
            }
            catch (Exception ex)
            {
                return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, ex);
            }
        }
        [HttpPost]
        [Route("Save")]
        public HttpResponseMessage Save(BANGALORVM vm)
        {
            try
            {
                using (Database1Entities obj = new Models.Database1Entities())
                {
                    BANGALOR bm = new BANGALOR();
                    bm.DID = vm.DID;
                    bm.NAME = vm.NAME;
                    obj.Entry(bm).State = EntityState.Added;
                    obj.SaveChanges();
                    obj.MANGALORs.AddRange(vm.LMANGALOR.Select(e => new MANGALOR { NAME = e.NAME, CID = e.CID, DID = vm.DID }));
                    obj.SaveChanges();
                    var req= Request.CreateResponse(HttpStatusCode.Created,"Data Saved.");
                    req.Headers.Location = new Uri(Url.Link("BGET", new { did = vm.DID }));
                    return req;
                }
            }
            catch (Exception ex)
            {
                return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, ex);
            }
        }
        [HttpPut]
        [Route("Update/{did:int}")]
        public HttpResponseMessage Update([FromUri]int did,[FromBody]BANGALORVM vm)
        {
            try
            {
                using (Database1Entities obj = new Models.Database1Entities())
                {
                    BANGALOR bm = obj.BANGALORs.Find(did);
                    bm.NAME = vm.NAME;
                    obj.Entry(bm).State = EntityState.Modified;
                    obj.SaveChanges();
                    obj.MANGALORs.RemoveRange(obj.MANGALORs.Where(e => e.DID == did));
                    obj.SaveChanges();
                    obj.MANGALORs.AddRange(vm.LMANGALOR.Select(e => new MANGALOR { NAME = e.NAME, CID = e.CID, DID = vm.DID }));
                    obj.SaveChanges();
                    return Request.CreateResponse(HttpStatusCode.OK, "Data Updated.");
                 
                }
            }
            catch (Exception ex)
            {
                return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, ex);
            }
        }

        [HttpDelete]
        [Route("Delete/{did:int}")]
        public HttpResponseMessage Delete([FromUri]int did)
        {
            try
            {
                using (Database1Entities obj = new Models.Database1Entities())
                {
                    BANGALOR bm = obj.BANGALORs.Find(did);
                    obj.Entry(bm).State = EntityState.Deleted;
                    obj.SaveChanges();
                    obj.MANGALORs.RemoveRange(obj.MANGALORs.Where(e => e.DID == did));
                    obj.SaveChanges();
                    return Request.CreateResponse(HttpStatusCode.OK, "Data Deleted.");

                }
            }
            catch (Exception ex)
            {
                return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, ex);
            }
        }


    }
}

Angularjs Model :

export interface Ibangalore {
    DID: number;
    NAME: string;
    LMANGALOR: IMANGALOR[];
}
export interface IMANGALOR {
    EID: number;
    NAME: string;
    CID: number;
    DID: number;
}
export interface Icountry {
    CID: number;
    CNAME: string;
}

Angularjs Service :

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Icountry, Ibangalore } from './bangalore.model';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class BangaloreService {
    baseUrl = 'http://localhost:2813/api/Bangaloreservices';
    constructor(private http: HttpClient) {
    }
    Getc(): Promise<Icountry[]> {
        return this.http.get<Icountry[]>(`${this.baseUrl}/${'Countries'}`)
            .toPromise();
    }
    Save(bm: Ibangalore): Promise<string> {
        return this.http.post<string>(`${this.baseUrl}/${'Save'}`
            , JSON.stringify(bm)
            , { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) })
            .toPromise();
    }
    Gets(): Promise<Ibangalore[]> {
        return this.http.get<Ibangalore[]>(`${this.baseUrl}/${'Gets'}`)
            .toPromise();
    }
    Get(id: number): Promise<Ibangalore> {
        return this.http.get<Ibangalore>(`${this.baseUrl}/${'Get'}/${id}`)
            .toPromise();
    }
    Update(bm: Ibangalore): Promise<string> {
        return this.http.put<string>(`${this.baseUrl}/${'Update'}/${bm.DID}`
            , JSON.stringify(bm)
            , { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) })
            .toPromise();
    }
    Delete(bid: number): Promise<string> {
        return this.http.delete<string>(`${this.baseUrl}/${'Delete'}/${bid}`
            , { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) })
            .toPromise();
    }
}


Angularjs list component :

import { Component, OnInit } from '@angular/core';
import {Router} from '@angular/router';
import { BangaloreService } from './bangalore.service';
import { Ibangalore } from './bangalore.model';
import { Subject } from 'rxjs/Subject';

@Component({
  selector: 'app-listbangalore',
  templateUrl: './listbangalore.component.html',
  styleUrls: ['./listbangalore.component.css']
})
export class ListbangaloreComponent implements OnInit {
list: Ibangalore[];
dtOptions: DataTables.Settings = {};
dtTrigger: Subject<any> = new Subject();
  constructor(private ru: Router, private bs: BangaloreService) { }

  ngOnInit() {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 2
    };
    this.fill();
  }
addNew(): void {
this.ru.navigate(['/create']);
}
fill(): void {
   this.bs.Gets().then(data => {
    this.list = data;
    this.dtTrigger.next();
   });
}
del(id: number) {
  this.ru.navigate(['/delete', id]);
}
}

Angularjs List View :

<div class="form-group">

    <div class="col-lg-8">

        <input type="button" class="btn btn-primary" value="Add New" (click)="addNew()" style="width:80px" />

    </div>

    <label class="control-label col-lg-4"></label>

</div><br><br>

<div class="form-group">

    <div class="col-lg-10">

        <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-bordered table-condensed table-hover table-responsive table-striped">

            <thead class="bg bg-primary">

                <tr>

                    <th>Sl No.</th>

                    <th>NAME</th>

                    <th>ACTION</th>

                </tr>

            </thead>

            <tbody>

                <tr *ngFor="let c of list;let i=index">

                    <td>{{i+1}}</td>

                    <td>

                        {{c.NAME}}

                    </td>

                    <td>

                        <a [routerLink]="['/create',c.DID]">Edit</a> |

                        <a (click)="del(c.DID)">Delete</a>

                    </td>

                </tr>

            </tbody>

        </table>

    </div>

    <label class="control-label col-lg-4"></label>

</div>

Angularjs Create Component :

import { Component, OnInit, ViewChild } from '@angular/core';

import { Ibangalore, Icountry, IMANGALOR } from './bangalore.model';

import { BangaloreService } from './bangalore.service';

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

import {Router, ActivatedRoute} from '@angular/router';

import { Subject } from 'rxjs/Subject';

@Component({

  selector: 'app-createbangalore',

  templateUrl: './createbangalore.component.html',

  styleUrls: ['./createbangalore.component.css']

})

export class CreatebangaloreComponent implements OnInit {

@ViewChild('frmDept') public frmD: NgForm;

BM: Ibangalore;

listc: Icountry[];

id: number;

  constructor(private bs: BangaloreService, private ru: Router, private ar: ActivatedRoute ) { }

  ngOnInit() {

    this.CLR();

    this.id = this.ar.snapshot.params['id'];

    this.bs.Getc().then(data => this.listc = data);

    if (this.id !== 0) {

      this.bs.Get(this.id).then(data => this.BM = data);

    }

  }

CLR(): void {

  this.BM = {

   DID: null,

   NAME: null,

   LMANGALOR: new Array()

  };

  this.add();

  this.frmD.reset();

  this.id = 0;

}

save(): void {

  if (this.id !== 0) {

    this.bs.Update(this.BM).then(data => {

      alert(data);

      this.CLR();

      this.ru.navigate(['/list']);

    });

  } else {

    this.bs.Save(this.BM).then(data => {

      alert(data);

      this.CLR();

      this.ru.navigate(['/list']);

    });

  }

}

reset(): void {

  this.CLR();

}

add(): void {

  this.BM.LMANGALOR.push({EID: null, NAME: null, CID: null, DID: null});

}

sub(m: IMANGALOR): void {

  if (this.BM.LMANGALOR.length > 1) {

    this.BM.LMANGALOR.splice(this.BM.LMANGALOR.indexOf(m), 1);

  }

}

}

Angularjs Create View :

<form class="form-horizontal" #frmDept="ngForm">

  <div class="form-group" [class.has-success]="DID.valid" [class.has-error]="DID.invalid && DID.touched">

      <label class="control-label col-lg-4">DID</label>

      <div class="col-lg-4">

          <input type="text" class="form-control" #DID="ngModel" [(ngModel)]="BM.DID" required name="DID" />

      </div>

      <span class="help-block" *ngIf="DID.invalid && DID.touched">

          DID should not be blank.

      </span>

  </div>

  <div class="form-group" [class.has-success]="NAME.valid" [class.has-error]="NAME.invalid && NAME.touched">

      <label class="control-label col-lg-4">NAME</label>

      <div class="col-lg-4">

          <input type="text" class="form-control" #NAME="ngModel" [(ngModel)]="BM.NAME" required name="NAME" />

      </div>

      <span class="help-block" *ngIf="NAME.invalid && NAME.touched">

          Name should not be blank.

      </span>

  </div>

</form>

<div class="form-group">

    <label class="control-label col-lg-4"></label>

    <div class="col-lg-6">

        <table class="table table-bordered table-condensed table-hover table-responsive table-striped">

            <thead class="bg bg-danger">

                <tr>

                    <th>NAME</th>

                    <th>COUNTRY</th>

                    <th  style="text-align:center"><a  style="color:green" (click)="add()">Add</a></th>

                </tr>

            </thead>

            <tbody>

                <tr *ngFor="let c of BM.LMANGALOR;let i=index">

                    <td>

                        <div class="form-group" [class.has-success]="NAME.valid" [class.has-error]="NAME.invalid && NAME.touched">

                            <div>

                                <input type="text" class="form-control" #NAME="ngModel" [(ngModel)]="c.NAME" required name="NAME" />

                            </div>

                            <span class="help-block" *ngIf="NAME.invalid && NAME.touched">

                                Name should not be blank.

                            </span>

                        </div>

          

                    </td>

                    <td>

                        <div class="form-group" [class.has-success]="CID.valid" [class.has-error]="CID.invalid && CID.touched">

                            <div>

                                <select class="form-control"  #CID="ngModel" [(ngModel)]="c.CID" required name="CID">

                                    <option [ngValue]="null">Select</option>

                                    <option *ngFor="let d of listc" [value]="d.CID">{{d.CNAME}}</option>

                                </select>

                            </div>

                            <span class="help-block" *ngIf="CID.invalid && CID.touched">

                                Please select a country

                            </span>

                        </div>

          

                    </td>

                   

                    <td style="text-align:center"><a style="color:red" (click)="sub(c)">Remove</a></td>

                </tr>

            </tbody>

          </table>

          

    </div>

    

</div>

<form class="form-horizontal">

  <div class="form-group">

      <label class="control-label col-lg-4"></label>

      <div class="col-lg-4">

          <input type="button" class="btn btn-primary" value="Submit" (click)="save()" style="width:80px" />

          <input type="button" class="btn btn-primary" value="Reset" (click)="reset()" style="width:80px" /><br><br>

          <a [routerLink]="['/list']">Back To List</a>

      </div>

      

  </div>

</form>

Angularjs Delete Componet :

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

import { Router, ActivatedRoute } from '@angular/router';

import { BangaloreService } from './bangalore.service';

@Component({

  selector: 'app-deletebangalore',

  templateUrl: './deletebangalore.component.html',

  styleUrls: ['./deletebangalore.component.css']

})

export class DeletebangaloreComponent implements OnInit {

id: number;

  constructor(private bs: BangaloreService, private ru: Router, private ac: ActivatedRoute) { }

  ngOnInit() {

    this.id = this.ac.snapshot.params['id'];

  }

yes(): void {

this.bs.Delete(this.id).then(data => {

  alert(data);

  this.ru.navigate(['/list']);

});

}

}

Angularjs Delete View :

<div class="form-group">

  <label class="control-label col-lg-12"><h2>Do you want to delete it ?</h2></label> 

  </div><br><br>

  <div class="form-group">

    <div class="col-lg-12">

      <input type="button" class="btn btn-primary" value="Yes" (click)="yes()" style="width:80px" />

      <input type="button" class="btn btn-primary" value="No" [routerLink]="['/list']" style="width:80px" />

  </div>

  </div>

  

Angularjs app view :

<div style="padding:5px" class="container">

        

          <ul class="nav nav-tabs">

        

           <li routerLinkActive="Active">

        

             <a routerLink="list">Employee</a>

        

           </li>

        

           <li routerLinkActive="Active">

        

              <a routerLink="list">Department</a>

        

            </li>

        

          </ul>

        

        <br>

        

        <router-outlet></router-outlet>

        

        </div>

        

Angularjs Router :

const appRoutes: Routes = [

  { path: 'list', component: ListbangaloreComponent },

  { path: 'create/:id', component: CreatebangaloreComponent },

  { path: 'delete/:id', component: DeletebangaloreComponent },

  { path: 'create', component: CreatebangaloreComponent },

  { path: '', redirectTo: '/list', pathMatch: 'full' },

  { path: '**', component: PagenotfoundComponent }

];