Angular: Issue with Singleton Service implemented via Dependency Injection

Ok I think you are navigating by changing the url in the browser as there is no way provided to navigate in the example provided, which surely would not work as when you change the url you are actually reloading your app, which deletes all data in your app memory.

Your service is working fine, you just need to navigate using the @angular/router, and no it can't handle manual url changes and no nothing else can do that.

But it will handle links through routerLink more on that here - router official docs

inside product-listing.component.html

product-listing works!

<p *ngFor="let item of sampleData">{{ item.id }} -{{ item.name }}</p>

<!-- Example of using routerLink -->
<a routerLink="/update">go to update</a>

it can also handle dynamic routing through Router service using navigateTo or navigateByUrl functions like this:

inside product-update.component.ts

 // product-update.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router'
import { FormGroup, FormControl, FormArray } from '@angular/forms';
import { ApiService } from '../../core/api.service';
@Component({
  selector: 'app-product-update',
  templateUrl: './product-update.component.html',
  styleUrls: ['./product-update.component.css']
})
export class ProductUpdateComponent implements OnInit {
  dataForm: FormGroup;
  
  // do not forget to import the service
  constructor(private api: ApiService, private router: Router) {}

  ngOnInit() {
    this.dataForm = new FormGroup({
      id: new FormControl(' '),
      name: new FormControl(' ')
    });
  }

  saveData() {
    this.api.addData({
      id: this.dataForm.controls.id.value,
      name: this.dataForm.controls.name.value
    });
    // Use of router service `navigateByUrl` to dynamically redirect to another view
    this.router.navigateByUrl('/listing')
  }
}

But for any of these routing methods to work you need to add RouterModule.forChild() to the imports of the module including these components declarations. Like this:

inside product-catalog.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import {CoreModule } from '../core/core.module';
import { RouterModule } from '@angular/router';

import { ProductListingComponent } from './product-listing/product-listing.component';
import { ProductUpdateComponent } from './product-update/product-update.component';

@NgModule({
  imports: [
    CommonModule,    ReactiveFormsModule,
    CoreModule.forRoot(),
    RouterModule.forChild([]) // Add this to the imports
  ],
  declarations: [ProductListingComponent, ProductUpdateComponent]
})
export class ProductCatalogModule { }

If you use this and test your service as it is, you will find that it is working perfectly fine.

But again when you change the url in the browser manually you are reloading your app, which deletes all of the app memory/data unless saved at backend.

Here is the link to the edit project https://stackblitz.com/edit/angular-z2m9ri

Hope this was helpful