Unwanted AutoUpdate Takes me to Another Rote

Question

I have a component watchlist component that is supposed to call a method from another component search-home-component when a click event occurs. here is my watchlist component:

<p>watchlist works!</p>

<div class="alert alert-light alert-dismissible" *ngFor="let item of watchlistList" (click)="searchClickedTicker(item.tickerSymbol)" style="cursor: pointer;">
    <button class="btn-close" type="button" data-bs-dismiss="alert" (click)="removeFromWatchlist(item.tickerSymbol); $event.stopPropagation();"></button>
    <p>watchlist item 1: {{item.tickerSymbol}} and {{item.companyName}}</p>
</div>

import { Component } from '@angular/core';
 import { OnInit } from '@angular/core'; 
import { AppServiceService } from '../app-service.service'; import { SearchService } from '../search.service'; 
import { Subscription } from 'rxjs';  

@Component({   selector: 'app-watchlist',   templateUrl: './watchlist.component.html',   styleUrl: './watchlist.component.css' }) 

export class WatchlistComponent implements OnInit {    
private tickerClickedSubscription: Subscription | undefined;      
constructor(private service: AppServiceService, public searchService: SearchService){}    public watchlistList: any[] = [];    
ngOnInit(){     console.log('Watchlist Iniitalised');      
// some code here    
}     
searchClickedTicker(ticker: string){     
console.log("div clicked", ticker);          
this.searchService.sendTickerClicked(ticker);   
} 
}  

and here is my search home component:

import { Component, OnChanges, ViewChild, input, OnDestroy, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { AppServiceService } from '../app-service.service';
import { SearchResultsComponent } from './search-results/search-results.component';
import { SearchService } from '../search.service';
import { FormBuilder, FormControl, FormGroup} from '@angular/forms';
import {MatFormFieldModule} from '@angular/material/form-field';
import { Subscription } from 'rxjs';
import { EventEmitter,Output } from '@angular/core';


@Component({
  selector: 'app-search-home',
  templateUrl: './search-home.component.html',
  styleUrls: ['./search-home.component.css']
})
export class SearchHomeComponent implements OnDestroy, OnInit{

  private tickerClickedSubscription: Subscription | undefined;

  

  constructor(private router: Router, private route: ActivatedRoute, private service: AppServiceService, public searchService: SearchService, private fb: FormBuilder) {
    
  }
  
  ngOnInit(){

    this.tickerClickedSubscription = this.searchService.tickerClicked$.subscribe(ticker => {
      
      this.searchTicker(ticker);
  
      
    });
  }
    

 

 searchTicker(searchInputValue: string) {

    
    //search ticker implementation

    this.autoUpdateInterval = setInterval(() => {
      this.updateResults(searchInputValue);
    }, 15000);
   
 }

updateResults(inputValue: string){
 //more code
    this.router.navigate(['/search', inputValue]);
  }
  
//some other code
  
  ngOnDestroy(): void {

    if (this.tickerClickedSubscription) {
      //this.tickerClickedSubscription.unsubscribe();
      console.log('unsubscribed from tickerClickedSubscription');
    }
    
  }

}

I have used a service that allows one component to call a method from another component:

import { Injectable } from '@angular/core';
import { Observable,Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SearchService {

  private tickerClickedSource = new Subject<string>();
  tickerClicked$ = this.tickerClickedSource.asObservable();

  constructor() {}

  sendTickerClicked(ticker: string) {
    console.log('sendtickerclicked called')
    this.tickerClickedSource.next(ticker);
  }
}

Since the searchTicker method in search-home component has some autoupdate in it (as well as navigation to another route) , I am navigated to this route even when I am inside the watchlist component. I only want to see the autoupdate when I am inside the home-component (or at least I don't want to automatically move to another route when inside the watchlist component).

I tried unsubscribing from the tickerClickedSubscription on ngDestroy in the home component but it will actually disable the whole service and nothing happens when (click)="searchClickedTicker(item.tickerSymbol) occurs. I also tried to use authGuard to prevent navigation to other routes but, I couldn't figure it out.

I'd appreciate any help!

Answer 1

Can you please create example on stackblitz. Also probably this is happening because you are missing clearInterval(this.autoUpdateInterval) in ngOnDestroy.

https://developer.mozilla.org/en-US/docs/Web/API/clearInterval