Variable compartida entre Componente y Servicio, cómo se pasa el valor?

Estoy siguiendo los ejemplos de un curso y no entiendo cómo se puede actualizar la variable "heroes" (es un objeto) en el componente:

"heroe.components.ts":

 import { Component, OnInit } from '@angular/core';
import { HeroeModel } from '../modelos/heroe.model';
import { NgForm } from '@angular/forms';
import { HeroesService } from '../servicios/heroes.service';

@Component({
  selector: 'app-heroe',
  templateUrl: './heroe.component.html',
  styleUrls: ['./heroe.component.css']
})

export class HeroeComponent implements OnInit {


  heroe: HeroeModel = new HeroeModel();

  constructor(private heroeService: HeroesService) { }

  ngOnInit( ) {
  }

  guardar(formulario: NgForm)
  {
    console.log("le hemos dado a guardar" + this.heroe.nombre);

    if(formulario.invalid){
      console.log("formulario es inválido");
    }

    this.heroeService.crearHeroe(this.heroe).subscribe((resp) => {
      console.log('respuesta');
      console.log(resp);
      this.heroe = resp;
    });
  }

}

Y este es el código del servicio "heroes.service.ts":

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { HeroeModel } from '../modelos/heroe.model';
import { map } from 'rxjs/operators';



@Injectable({
  providedIn: 'root'
})

export class HeroesService {

  private url = 'https://appdemo1-4ae33.firebaseio.com';

  constructor( private http: HttpClient) {}


  crearHeroe( heroe: HeroeModel){

    console.log("nombre" + heroe.nombre);
    return this.http.post(`${ this.url }/heroes.json`, heroe)
            .pipe(
              map( (resp: any) => {
                heroe.id = resp.name;
                return heroe;
              })
            );
  }
}

Realmente se puede comentar la linea en el componente "heroe.component.ts":

//this.heroe = resp;

y el objeto "heroe" se actualiza sólo en el componente y por tanto en la vista de ese componente. Me han dicho al que que ne Angular las variables se pasan por referencia, pero no entiendo ese proceso.

Es decir, el código en el componente se podría dejar así:

this.heroeService.crearHeroe(this.heroe).subscribe((resp) => {
  console.log('respuesta');
  console.log(resp);
  //this.heroe = resp;----> esta linea la comentamom pero heroe se sigue actualizando¿cómo es pos?
});

Realmente dentro de "subscribe no hago nada de nada aparte de imprimir una par de console.log.

EDITO 23/07/2020

Añado el template de ese componente:

<form (ngSubmit)="guardar(f)" #f="ngForm">
<div class="form-group">
    <label for="exampleInputEmail1">ID:</label>
    <input type="text" class="form-control" [(ngModel)]="heroe.id" aria-describedby="emailHelp" placeholder="Id del héroe" name="id">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
    <label for="exampleInputEmail1">Nombre:</label>
    <input type="text" class="form-control" [(ngModel)]="heroe.nombre" aria-describedby="emailHelp" placeholder="nombre" name="nombre">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
    <label for="exampleInputEmail1">Poder:</label>
    <input type="text" class="form-control" [(ngModel)]="heroe.poder" aria-describedby="emailHelp" placeholder="poder" name="poder">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
    <label for="exampleInputEmail1">Vivo:</label>
    <input type="text" class="form-control" [(ngModel)]="heroe.vivo" aria-describedby="emailHelp" placeholder="vivo" name="vivo">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<button type="submit" class="btn btn-primary">Submit</button>

dadsadasd