<form (submit)="addContact()">
    <div class="form-group">
        <label for="first_name">First Name</label>
        <input type="text" [(ngModel)]="first_name" name="first_name" class="form-control">
    </div>
    <!-- /.form-group -->
    <div class="form-group">
        <label for="first_name">Last Name</label>
        <input type="text" [(ngModel)]="last_name" name="last_name" class="form-control">
    </div>
    <!-- /.form-group -->
    <div class="form-group">
        <label for="first_name">Phone</label>
        <input type="text" [(ngModel)]="phone" id="phone" name="phone" class="form-control" required>
    </div>
    <!-- /.form-group -->
    <input type="submit" class="btn-btn-success" value="Add Contact">
</form>

import { Component, OnInit } from '@angular/core';
  import {ContactService} from '../contact.service';
  import {Contact} from '../contact';


  @Component({
    selector: 'app-contacts',
    templateUrl: './contacts.component.html',
    styleUrls: ['./contacts.component.css'],
    providers:[ContactService]
  })
  export class ContactsComponent implements OnInit {

  contacts: Contact[];
  contact:Contact;
  first_name:string;
  last_name:string;
  phone: string;

    constructor(private contactService: ContactService) {}

    addContact(){

        const newContact = {
            first_name: this.first_name,
            last_name : this.last_name,
            phone: this.phone
        }
        this.contactService.addContact(newContact)
        .subscribe(contact=>{
          console.log(contact); //displaymenssage
          this.contacts.push(contact);
          this.contactService.getContacts() .subscribe( contacts => this.contacts = contacts);
        });

    }

    deleteContact(id:any){
        var contacts = this.contacts;
        this.contactService.deleteContact(id)
        .subscribe(data=>{
            if(data.n==1) {
                for(var i=0; i<contacts.length; i++) {
                    if(contacts[i]._id == id) {
                        contacts.splice(i,1);
                    }
                }
            }
        })
    }
    ngOnInit() {
        this.contactService.getContacts()
        .subscribe( contacts =>
            this.contacts = contacts);
    }

  }