json file :

[{
"empname":"Ram",
"designation":"Software engineer",
"salary":15000,
"experience":3
},
{
"empname":"Sam",
"designation":"Testing engineer",
"salary":25000,
"experience":5
},
{
"empname":"Ravi",
"designation":"Dev ops",
"salary":35000,
"experience":7
}]

enter command to make service:

ng g s data

in app module.ts:
import {HttpClientModule} from '@angular/common/http';

Now in data service.ts:

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

export class DataService {

employee:Object;

constructor(private http: HttpClient) {

this.employee = this.http.get('assets/emp.json');
}

getData(){
return this.employee;
}

addData(emprec){
this.employee.push(emprec);
}
}
make new components:
ng g c add
ng g c view
ng g c home
and then refresh the workspace

ng g c nav
now in app html:
<app-nav></app-nav>
<router-outlet></router-outlet>

in nav.html:

<div>
<nav>
<a routerLink="/"></a>
<a routerLink="/view">View All</a>&nbsp;
<a routerLink="/add">Add New</a>
</nav>
</div>

in app-routing.ts:

import { AddComponent } from './add/add.component';

import { ViewComponent } from './view/view.component';
import { HomeComponent } from './home/home.component';

const routes: Routes = [

{path:"", component:HomeComponent},
{path:"add", component:AddComponent},
{path:"view", component:ViewComponent}
];
in view component.ts:

import {DataService} from '../data.service';

export class ViewComponent implements OnInit {

emp:Object[];

constructor(private data:DataService) {
let k=this.data.getData();
k.subscribe(data=>{
this.emp=data;
});
}

ngOnInit() { }

onRemove(i){
this.emp.splice(i,1);

in view html:
<td><button (click)="onRemove(i)" id ="remove{{i+1}}"> Remove
</button>
</td>
inn app module.ts:
import { FormsModule} from '@angular/forms';
import {ReactiveFormsModule} from '@angular/forms';
 in add comp.ts:
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import { DataService } from '../data.service';

addForm: FormGroup;
constructor(private formBuilder: FormBuilder,
private data: DataService) { }
ngOnInit() {
this.addForm = this.formBuilder.group({
empname: ['', Validators.required],
designation: ['', Validators.required],
salary: ['', Validators.required],
experience: ['', Validators.required],
});
}
onSubmit() {
let rec = this.addForm.value; //JSON.stringify(this.addForm.value);
// this.persons.push(rec);
this.data.addrec(rec);
alert(JSON.stringify(this.addForm.value));
}

onSubmit() {
let rec = this.addForm.value; //JSON.stringify(this.addForm.value);
// this.persons.push(rec);
this.dataService.addrec(rec);
alert(JSON.stringify(this.addForm.value));
}
}

in add.html:
<hr>

<div class="col-md-6 user-container">

<h2 class="text-center">Add User</h2>
<form [formGroup]="addForm" (ngSubmit)="onSubmit()">

<div class="form-group">
<label for="empname">Emp Name:</label>
<input formControlName="empname" placeholder="empname"
name="empname" class="form-control" id="empname">
</div>
<div class="form-group">
<label for="designation">Designation:</label>
<input formControlName="designation"
placeholder="designation" name="designation" class="form-control"
id="designation">
</div>

<div class="form-group">
<label for="salary">Salary:</label>
<input formControlName="salary" placeholder="salary"
name="salary" class="form-control" id="salary">
 </div>

<div class="form-group">
<label for="experience">Experience:</label>
<input formControlName="experience" placeholder="experience"
name="experience" class="form-control" id="experience">
</div>

<button class="btn btn-success">Add Data</button>

</form>
</div>
in data service:
import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import { of } from 'rxjs';

@Injectable({
providedIn: 'root'
})
export class DataService {
employee:Object;
newdata:any;
constructor(private http: HttpClient) {
this.employee = this.http.get('assets/emp.json');
}

getData(){
return this.employee;
}
addrec(emprec){

this.employee.subscribe(data=>{
this.newdata=data;
this.newdata.push(emprec);
this.employee=of(this.newdata);
});

}
}