I am very new to angular. I have a component named code.ts which has a single drop down and a Add New button. I have another component with the form to add a new code. I want to re-load codes in the drop down when I add a new code. I tried to follow another thread I found here but I cannot make it to work. This is what I have in the code component:

import { AfterViewInit, Component, OnInit, OnDestroy, ViewChild, numberAttribute } from '@angular/core';
import { CommonModule, NgFor } from '@angular/common';
import { CodeNewComponent } from './code-new/code-new.component';


import { FormsModule } from '@angular/forms';
import { IUITKSelectItemProps, UITKSelectModule, UITKTableDataSource, UITKTableModule } from '@uitk/angular';
import { CodeService } from './code.service';

import { ActivatedRoute, Router, RouterModule } from '@angular/router';
import { Subscription } from 'rxjs';
import { CommonService } from '../shared/common.service';

@Component({
  selector: 'app-code',
  standalone: true,
  imports: [CommonModule, NgFor, FormsModule, RouterModule, UITKSelectModule, CodeNewComponent],
  templateUrl: './code.component.html',
  styleUrl: './code.component.css'
})
export class CodeComponent implements OnInit, OnDestroy{
  messageReceived: any;
  private subscriptionName: Subscription = new Subscription(); //important to create a subscription


  constructor(private _codeService: CodeService, 
    private _service: CommonService,
    private activatedRoute: ActivatedRoute, private router: Router)
  {    
    if(this.tableGroupCode === undefined){
      this.tableGroupCode = {id: '', label:'', value:''};
    }
    this.subscriptionName= this._service.getUpdate().subscribe
    (message => { //message contains the data sent from service
    this.messageReceived = message;
    if (message=='New Code added'){
        this.getCodes(); 
       }
    });
  }

  ngOnInit(): void {
    this.getCodes();
   }
   
   getCodes() : void
   {
    console.log('Calling this.GetCodes()');
    this._codeService.GetCodes().then(
      (codes) => {
       
          for(let entity of codes){
            this.codes.push({id: entity.Code, label: entity.Description, value: entity.Code});
          }
      },
  );
   }
   codes: IUITKSelectItemProps[] = [];
   tableGroupCode: IUITKSelectItemProps|undefined;;

   onSelect(groupCode: IUITKSelectItemProps|undefined){
    // alert(groupCode);
    if(groupCode !== undefined && groupCode?.id!='')
      {
        localStorage.setItem('selectedTableGroupCode', groupCode?.id??"");
      }
    //  console.log(localStorage.getItem('selectedTableGroupCode'));
   }

   ngOnDestroy() { // It's a good practice to unsubscribe to ensure no memory leaks
    this.subscriptionName.unsubscribe();
}
}

And this is what I have in the Submit button code for the code-new component:

  onSubmit() {
    const formValue = this.codeForm.getRawValue();
    this.newCode = new Code(
    'TableGroupCode',
    formValue.codeControl!,  
    formValue.descriptionControl!,
    'A'
    );

    this._codeService.InsertUpdateCode(this.newCode).then(
      (code) => {
          this.returnedCode = code;
      },
    );
    //alert("Table Group Code saved successfully!"); // TODO change to nice modal
    //this.alertConfig.id = 'info-alert' + this.count++;
    this.alertConfig.content = 'Table Group Code saved successfully!';
   // this.codeAdded.emit({id: formValue.codeControl!, label: formValue.descriptionControl!});
    this.alertService.setContainerConfig({position: 'top-right'});
    this.alertService.showNotification(this.alertConfig);
    this._service.sendUpdate('New Code added');    
    this.router.navigate(['/']);
   
  }

What should I do to achieve this simple task of re-loading the list of codes?

Thanks in advance