Angular 5 refresh component from service

Question

I am somehow struggling to get a grasp of the architecture.

I have a search component, a table component, a table service.

1. When I do a search I call a rest webservice and getback a JSON. I store this json using a tableservice.setData();

2. I go to the table component page it is working and my data is in the table

3. I search again but this time on the table component page (after it has been initialized) and it is not getting updated as it is already instanciated and it is not going through the component constructor again.

What am I missing is a way to force a refresh of the table component within the table service when my data changes.

Is there any way to achieve this?

tablecomponent.ts

constructor(private service: SmartTableService) {
    console.log("entering constructorSTable")
    const data = this.service.getData();
    this.source.load(data);
}

searchcomponent.ts

constructor(private searchService: NbSearchService,
            private http: HttpClient, 
            private myTableService : SmartTableService ) {}

ngOnInit(): void {
    this.searchService.onSearchSubmit()
            .subscribe((data: { term: string, tag: string }) => {
                 var req = this.http.post('http://...', {
                 ...
    }).subscribe(
        res => {
          var ApiRet = res;
          this.myTableService.setData(ApiRet);
        },
        err => {
          console.log("Error occured");
        }
      );
  });

the tableservice just contains a setter and getter for the data.

Answer 1

tablecomponent.ts

subscription: Subscription;
constructor(private service: SmartTableService) {
    this.subscription = this.service.getData().subscribe(data => { 
        this.source.load(data);
    });
}

ngOnDestroy() {
    // unsubscribe to ensure no memory leaks
    this.subscription.unsubscribe();
}

table.service.ts

@Injectable()
export class SmartTableService {
    private subject = new Subject<any>();

    updateData(data: any) {
        this.subject.next({ data: data });
    }

    getData(): Observable<any> {
        return this.subject.asObservable();
    }
}

searchcomponent.ts

...
.subscribe(
    res => {
      var ApiRet = res;
      this.myTableService.updateData(ApiRet);
    },
    err => {
      console.log("Error occured");
    }
);
...

Answer 2

I has a asimilar issue and try using this code

import { ChangeDetectorRef } from '@angular/core';

    constructor(private service: SmartTableService, private ref: ChangeDetectorRef){

        this.subscription = this.service.getData().subscribe(data => { 
           this.source.load(data);
        });

    setInterval(() => {
       this.ref.detectChanges()             
    }, 1000);


   }

it is going to force to load the dom every one second.