I am trying to pass a string from one component(ProductComponent) to another unrelated component(SellerComponent) in Angular. The idea is to double click on a button on the ProductComponent and it brings us to a new screen(SellerComponent) but it should pass a string variable so that I can use it in my SellerComponent. I have seen tutorials where they are using services to pass data and I am trying to do the same.

In myservice.service.ts

@Injectable({
 providedIn: 'root'
})
export class myservice {
 private prodId= new Subject<string>();
 currentProdId = this.ProdId.asObservable();

 constructor() { }

 setProdId(prodId: string) {
    this.prodId.next(prodId);
 }
}

In ProductComponent

  constructor(private router: Router, private myservice: MyService) { }

  openSellerScreen(productId: string): void {
   this.myservice.setProdId(productId);
   this.router.navigate(['/product/sellerpage']);
  }

In SellerComponent

  productId: string = '';
  subscription: Subscription;

  constructor(private myservice: Myservice) { 
   this.subscription = this.myservice.currentProdId.subscribe(productId => {
   this.productId = productId;
  });
  

In my seller component's html, I am trying to show the productId by doing

 <p>{{ productId }} </p>

But all it is doing is showing blank. Is it not working because I am going to a different page by doing this.router.navigate? I cant understand why it wouldn't show.

I am trying to pass a string from one component(ProductComponent) to another unrelated component(SellerComponent) in Angular. The idea is to double click on a button on the ProductComponent and it brings us to a new screen(SellerComponent) but it should pass a string variable so that I can use it in my SellerComponent. I have seen tutorials where they are using services to pass data and I am trying to do the same.

In myservice.service.ts

@Injectable({
 providedIn: 'root'
})
export class myservice {
 private prodId= new Subject<string>();
 currentProdId = this.ProdId.asObservable();

 constructor() { }

 setProdId(prodId: string) {
    this.prodId.next(prodId);
 }
}

In ProductComponent

  constructor(private router: Router, private myservice: MyService) { }

  openSellerScreen(productId: string): void {
   this.myservice.setProdId(productId);
   this.router.navigate(['/product/sellerpage']);
  }

In SellerComponent

  productId: string = '';
  subscription: Subscription;

  constructor(private myservice: Myservice) { 
   this.subscription = this.myservice.currentProdId.subscribe(productId => {
   this.productId = productId;
  });
  

In my seller component's html, I am trying to show the productId by doing

 <p>{{ productId }} </p>

But all it is doing is showing blank. Is it not working because I am going to a different page by doing this.router.navigate? I cant understand why it wouldn't show.

• angular

• Can an example be created? stackoverflow/help/minimal-reproducible-example – Chris Wong Commented Feb 17 at 5:56
• i dont know the full setup, but you variables in template which are set in an async context could be ... difficult. I would suggest not to use you setup with manual subscript but with the async pipe, which handles the subscription and templazte binding for you. {{ myservice.currentProdId | async }} or if your stack it modern enough do not use subjects but signals. – Thomas Renger Commented Feb 17 at 6:17
• You can use service but you can also pass productId in url path as parameter and can fetch from url for further use. – Farhat Zaman Commented Feb 17 at 6:34
• @FarhatZaman I do not wish to show the id in the url – craftdeer Commented Feb 17 at 6:35

2 Answers 2

Instead of subject just use BehaviorSubject which retains the last emitted value and can be used to eliminate timing issues you get when using Subject.

@Injectable({
 providedIn: 'root'
})
export class myservice {
 private prodId = new BehaviorSubject<string>();
 currentProdId = this.ProdId.asObservable();

 constructor() { }

 setProdId(prodId: string) {
    this.prodId.next(prodId);
 }
}

Try to move your subscribe to ngOnInit()

ngOnInit(): void {
  this.subscriptions.push(this.myservice.currentProdId.subscribe((result: 
   any) => {
    if (result) {
     this.productId = productId;
    }
   }));
}));