[Sugestão] Utilizar apenas um componente, ao invés de dois

Olá, Assistindo a aula, fiquei pensando que seria possível usar o mesmo componente tanto para criar quanto para editar Pensamentos. Então renomei CreateThoughtComponent para ThoughtFormComponent (to fazendo o projeto em inglês o máximo que eu posso), e foram necessárias poucas modificações:

em src/app/components/thoughts/thought-form/thought-form.component.html:

<section class="container ff-inter" [ngClass]="thoughtActionClass()">
  <header class="header">
    <h2>
      {{ thought.id ? "Editar" : "Adicionar" }} um <br />
      pensamento novo:
    </h2>
  </header>
  
<!-- ... -->
    
    <div class="acoes">
      <button *ngIf="thought.id" class="botao" (click)="editThougth()">
        Editar
      </button>
      <button *ngIf="!thought.id" class="botao" (click)="createThougth()">
        Salvar
      </button>
      <button class="botao" (click)="cancel()">cancelar</button>
    </div>
  </form>
</section>

Em src/app/components/thoughts/thought-form/thought-form.component.ts:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Thought } from 'src/app/interfaces/thoughts';
import { ThoughtsService } from 'src/app/services/thoughts.service';
import { v4 as uuidv4 } from 'uuid';

@Component({
  selector: 'app-thought-form',
  templateUrl: './thought-form.component.html',
  styleUrls: ['./thought-form.component.css'],
})
export class ThoughtFormComponent implements OnInit {
  thought: Thought = {
    id: '',
    content: '',
    author: '',
    model: 'modelo1',
  };

  constructor(
    private thoughtService: ThoughtsService,
    private router: Router,
    private route: ActivatedRoute
  ) {}

  ngOnInit(): void {
    const id = this.route.snapshot.paramMap.get('id');
    if (id) {
      this.thoughtService
        .getThoughtById(id)
        .subscribe((thought: Thought) => (this.thought = thought));
    }
  }

  thoughtActionClass(): string {
    if (this.thought.id) {
      return 'editar-pensamentos';
    }
    return 'criar-pensamentos';
  }

  createThougth() {
    this.thought.id = uuidv4();
    this.thoughtService.createThought(this.thought).subscribe((result) => {
      console.log(result);
      this.router.navigate(['/listarPensamento']);
    });
  }

  editThougth() {
    this.thoughtService.editThought(this.thought).subscribe((result) => {
      console.log(result);
      this.router.navigate(['/listarPensamento']);
    });
  }

  cancel() {
    this.router.navigate(['/listarPensamento']);
  }
}

É necessário adicionar as classes novas no CSS também, então em src/app/components/thoughts/thought-form/thought-form.component.css:

/*...*/
.criar-pensamentos {
  padding: 2rem 0;
}

.criar-pensamentos form {
  background: #c4edff;

  border: none;
  border-radius: 20px;

  display: flex;
  flex-direction: column;

  padding: 2rem;
}

.criar-pensamentos form label {
  color: #154580;
  font-weight: bold;
  margin: 0 0 1rem;
}

.criar-pensamentos form .input {
  border: none;
  height: 40px;
  padding: 1rem 2rem;
  border-radius: 20px;
  margin: 0.5rem 0 2rem;
}

.criar-pensamentos form .textarea {
  border: none;
  padding: 1rem 2rem;
  border-radius: 20px;
  margin: 0.5rem 0 2rem;
}

.editar-pensamentos {
  padding: 2rem 0;
}

.editar-pensamentos form {
  background: #c4edff;

  border: none;
  border-radius: 20px;

  display: flex;
  flex-direction: column;

  padding: 2rem;
}

.editar-pensamentos form label {
  color: #154580;
  font-weight: bold;
  margin: 0 0 1rem;
}

.editar-pensamentos form .input {
  border: none;
  height: 40px;
  padding: 1rem 2rem;
  border-radius: 20px;
  margin: 0.5rem 0 2rem;
}

.editar-pensamentos form .textarea {
  border: none;
  padding: 1rem 2rem;
  border-radius: 20px;
  margin: 0.5rem 0 2rem;
}
/*...*/

E por fim, no routing module, src/app/app-routing.module.ts:

//...
const routes: Routes = [
  { path: '', redirectTo: 'listarPensamento', pathMatch: 'full' },
  { path: 'criarPensamento', component: ThoughtFormComponent },
  { path: 'listarPensamento', component: ListThoughtsComponent },
  {
    path: 'pensamentos/excluirPensamento/:id',
    component: ExcludeThoughtComponent,
  },
  { path: 'pensamentos/editarPensamento/:id', component: ThoughtFormComponent },
];
//...

Da pra ver melhor o que eu fiz nesse commit: https://github.com/Fernandomn/memoteca/commit/8aeff4ad3c72bf2dac1186c0a3941ac8ab5e6913

Espero que ajude!