angular does not make post request to node js rest API - node.js

Question

I am trying to develop a simple crud app using MEAN stack, but when trying to post form value angular service is not making post request. get request works perfectly but post not. i am using morgan to see the requests made to the nodejs server and it is not receiving the post request and all seems to be the same way that in the angular docs. I imported HttpClient modules.
empleados.component.html
<form [formGroup]="nuevoEmpleado" (submit)="addEmpleado()">
<label>
Nombre:
<input type="text" formControlName="nombre">
</label>
<label>
Apellido:
<input type="text" formControlName="apellido">
</label>
<label>
Cargo:
<input type="text" formControlName="cargo">
</label>
<button class="btn btn-primary" type="submit">Agregar Nuevo Empleado</button>
</form>
{{ nuevoEmpleado.value | json }}
<div class="main-container">
<table class="table table-dark">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Nombre</th>
<th scope="col">Apellido</th>
<th scope="col">Cargo</th>
</tr>
</thead>
<tbody>
<tr *ngFor = "let empleado of listaEmpleados">
<th>{{ empleado.index }}</th>
<td>{{ empleado.nombre }}</td>
<td>{{ empleado.apellido}}</td>
<td>{{ empleado.cargo }}</td>
</tr>
</tbody>
</table>
</div>
empleados.component.ts
import { Component, OnInit } from '#angular/core';
import { FormGroup , FormControl } from '#angular/forms';
import { EmpleadosService } from './empleados.service'
import { Empleado } from '../../clases/empleado'
#Component({
selector: 'app-empleados',
templateUrl: './empleados.component.html',
styleUrls: ['./empleados.component.css']
})
export class EmpleadosComponent implements OnInit {
listaEmpleados: Empleado[];
nuevoEmpleado = new FormGroup({
nombre: new FormControl(''),
apellido: new FormControl(''),
cargo: new FormControl('')
});
constructor(private empleadosService: EmpleadosService) { }
getEmpleados(){
this.empleadosService.getEmpleados().subscribe(empleados => this.listaEmpleados = empleados);
}
addEmpleado(){
this.empleadosService.addEmpleado(this.nuevoEmpleado.value);
}
ngOnInit(): void {
this.getEmpleados();
this.addEmpleado();
}
}
empleados.service.ts
import { Injectable } from '#angular/core';
import { HttpClient , HttpErrorResponse } from '#angular/common/http';
import { Observable } from 'rxjs';
import { Empleado } from '../../clases/empleado'
#Injectable({
providedIn: 'root'
})
export class EmpleadosService {
//url = 'assets/config.json'
url = 'http://localhost:3000'
constructor(private http: HttpClient) { }
getEmpleados():Observable<Empleado[]>{
return this.http.get<Empleado[]>(this.url);
}
addEmpleado(nuevoEmpleado: Empleado){
console.log(nuevoEmpleado);
return this.http.post<Empleado>(this.url , nuevoEmpleado)
}
}

Answer 1

Expanding on the comment made by R. Richards, without a subscription on the post call the Observerable never fires.
An Observerable is simply a function definition (sort of), it requires a subscription to it to actually get the call to run.
An observable itself is just a definition of a way to handle a stream of values. We can think of it as something close to a function. Creating an observable is somewhat similar to declaring a function, the function itself is just a declaration. Calling the function is something entirely different, as defining a function does not execute its code.
We need to call the function in order for something to happen, and that is also the case with an Observable: we need to subscribe to it in order for it to work!
Taken from 3 common Angular Rxjs Pitfalls
Look at the examples on that link to see what you're missing.

Answer 2

Observables are lazy, untill you subscribe them they wont be fullfilled where in case of promises this can work.
So you will need to subscribe to your post call observable as you have done in get api call.

Answer 3

You must subscribe, since when making an http call that returns an observable, remember that observables are lazy by nature.