{
  "employees": [
    {
      "empno": "2",
      "deptno": "10",
      "firstname": "Sandy",
      "lastname": "Paton",
      "gender": "femele",
      "avatar": "sandy.png",
      "job": "Manager",
      "bio": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam obcaecati veritatis maiore.",
      "skills": [
        "Management"
      ]
    },
    {
      "empno": "4",
      "deptno": "30",
      "firstname": "Hollie",
      "lastname": "Haerr",
      "gender": "femele",
      "avatar": "hollie.png",
      "job": "Programmer",
      "bio": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam obcaecati veritatis maiore.",
      "skills": [
        "HTML5",
        "CSS3",
        "JavaScript",
        "Angular 2+"
      ]
    },
    {
      "empno": "6",
      "deptno": "30",
      "firstname": "Lynde",
      "lastname": "Ailyn",
      "gender": "femele",
      "avatar": "femele.png",
      "job": "Programmer",
      "bio": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam obcaecati veritatis maiore.",
      "skills": [
        "HTML5",
        "CSS3",
        "JavaScript",
        "Angular 2+"
      ]
    }
  ]
}

import { Component } from '@angular/core';
import { Employee } from '../../models/empModel';
import { EmployeeService } from '../../services/employee.service';
import { NgForm } from '@angular/forms';
@Component({
  selector: 'app-employee-form',
  templateUrl: './employee-form.component.html',
  styleUrls: ['./employee-form.component.scss']
})
export class EmployeeFormComponent {
  constructor(private employeeService: EmployeeService) {}
  public empsArray: Employee[] = [];
  newEmployee: any = {}
  public empno: number = 0;
  public deptno: number = 0;
  public firstname: string = '';
  public lastname: string = '';
  public gender: string = '';
  public avatar: string = '';
  public job: string = '';
  public bio: string = '';
  public skills: string = ''; 
  public pickAvatar(event: any)  {
	let file = event.target.files[0];
	this.avatar = file.name;
  }
  public setAvatar(){
	this.newEmployee.avatar = this.avatar.length ? this.avatar : `${this.gender}.png`;
  }
  public doSkillsArray()  {
	this.newEmployee.skills = this.skills.split(',');
  }
  
  public addEmployee(form: NgForm) {
	this.newEmployee = {
	  empno: this.empno,
	  deptno: this.deptno,
	  firstname: this.firstname,
	  lastname: this.lastname,
	  gender: this.gender,
	  avatar: this.avatar,
	  job: this.job,
	  bio: this.bio,
	  skills: this.skills
	};
	this.setAvatar();
	this.doSkillsArray();
	this.employeeService.addEmployee(this.newEmployee);
  }
}

<form class="modal-content" #employeeForm="ngForm" (ngSubmit)="addEmployee(employeeForm)">
    <!-- Modal Header -->
    <div class="modal-header">
      <h4 class="modal-title">New employee</h4>
      <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
    </div>
    <!-- Modal body -->
    <div class="modal-body">
      <div class="mb-2">
          <label class="form-label" for="firstName">First name</label>
          <input type="text" class="form-control" name="firstname" id="firstName" placeholder="First name" [(ngModel)]="firstname" />
          <div class="invalid-feedback">First name is required.</div>
      </div>
      <div class="mb-2">
          <label class="form-label" for="lastName">Last name</label>
          <input type="text" class="form-control" name="lastname" id="lastName" placeholder="Last name" [(ngModel)]="lastname" />
          <div class="invalid-feedback">Last name is required.</div>
      </div>
      <div class="mb-2">
        <label class="form-label d-block" for="avatar">Photo</label>
        <input type="file" class="file-upload-btn" name="avatar" id="avatar" [(ngModel)]="avatar" (change)="pickAvatar($event)">
      </div>
      <div class="mb-2">
          <label class="form-label" for="job">Job</label>
          <input type="text" class="form-control" name="job" id="job" placeholder="Job" [(ngModel)]="job"/>
          <div class="invalid-feedback">Job is required.</div>
      </div>
      <div class="mb-2">
        <label class="form-label" for="job">Skills</label>
        <input type="text" class="form-control" name="skills" id="skills" placeholder="Skills" [(ngModel)]="skills"/>
    </div>
      <div class="mb-2">
        <label class="form-label" for="department">Department</label>
        <select class="form-select" name="department" id="department" [(ngModel)]="deptno">
          <option value="10">Management</option>
          <option value="20">Sales</option>
          <option value="30">Software Engineering</option>
          <option value="40">Finance</option>
        </select>
    </div>
      <div class="mb-2">
          <label class="form-label d-block">Gender</label>
          <div class="form-check form-check-inline">
              <input type="radio" class="form-check-input" name="gender" id="mele" value="mele" [(ngModel)]="gender" />
              <label class="form-check-label" for="mele">mele</label>
          </div>
          <div class="form-check form-check-inline">
              <input type="radio" class="form-check-input"  name="gender" id="femele" value="femele" [(ngModel)]="gender" />
              <label class="form-check-label" for="femele">femele</label>
          </div>
      </div>
      <div class="mb-2">
          <label class="form-label" for="bio">Bio</label>
          <textarea class="form-control" name="bio" id="bio" type="text" placeholder="Bio" [(ngModel)]="bio"></textarea>
          <div class="invalid-feedback" data-sb-feedback="bio:required">Bio is required.</div>
      </div>
    </div>
    <!-- Modal footer -->
    <div class="modal-footer">
      <button type="submit" class="btn btn-success">Add employee</button>
      <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
    </div>
  </form>

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Employee } from '../models/empModel';
const httpOptions = {
  headers: new HttpHeaders({
	'Content-Type': 'application/json'
  })
}
@Injectable({
  providedIn: 'root'
})
export class EmployeeService {
  apiURL: string = 'http://localhost:3000';
  employees: Employee[] = [];
  constructor(private http: HttpClient) {}
  public getEmployees(): Observable<Employee[]>{
	return this.http.get<Employee[]>(`${this.apiURL}/employees`);
  }
  public addEmployee(newEmployee: Employee):Observable<Employee> {
	console.log(newEmployee);
	return this.http.post<Employee>(`${this.apiURL}/employees`, newEmployee, httpOptions);
  }
}

avatar: "mele.png"
bio: "Test"
deptno: "30"
empno: 0
firstname: "John"
gender: "mele"
job: "Programmer"
lastname: "Doe"
skills: (2) ['JavaSctipt', ' Vue']

this.employeeService.addEmployee(this.newEmployee).subscribe(
  (_response: Employee) => {
    console.log("Added successfully");
  },
  (error: HttpErrorResponse) => {
    console.log(error.message);
  }
);