Stock rates not displaying when we change from one page to another angular

Question

We are developing an angular 8 application and the main part of the application is to show our commodity rates. Using lightstreamer we push the rates from the URL. Every thing works fine but we move from one page and come back to same page the rates not coming. Rates starts displaying only we manually refresh the page. I have given the code sample below

Ts file:

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { StockListService } from './stock-list.service';

@Component({
    selector: 'app-stock-list',
    templateUrl: './stock-list.component.html',
    styleUrls: ['./stock-list.component.css']
})
export class StockListComponent implements OnInit {

    itemNames = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9', 'item10'];
    fieldNames = ['stock_name', 'last_price', 'time', 'pct_change', 'bid_quantity', 'bid', 'ask', 'ask_quantity',
'min', 'max', 'ref_price', 'open_price'];

    /**
     * <code>stocks</code> is a matrix containing the stock values.
     * Rows represent stocks, while columns represent field values.
     * For example <code>stocks[0][1]</code> is the last_price of item1.
     */
    stocks: string[][];

    // ref is needed to refresh the service's clients when the stock matrix changes
    constructor(private service: StockListService, private ref: ChangeDetectorRef) {
        this.stocks = this.newTable();
    }

    ngOnInit() {
        this.service
            .subscribe(this.itemNames, this.fieldNames)
            .addListener({
                onItemUpdate: (updateObject) => {
                    const itemName = updateObject.getItemName();
                    updateObject.forEachChangedField((fieldName: string, fieldPos: number, val: string) => {
                        const itemIndex = this.itemNames.indexOf(itemName);
                        const fieldIndex = this.fieldNames.indexOf(fieldName);
                        console.assert(itemIndex !== -1);
                        console.assert(fieldIndex !== -1);
                        this.stocks[itemIndex][fieldIndex] = val;
                    });
                    this.ref.detectChanges();
                }
            });
    }

    private newTable() {
        return new Array(this.itemNames.length)
            .fill(null)
            .map(() => new Array(this.fieldNames.length).fill('-'));
    }
}

Service file

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

declare var LightstreamerClient: any;
declare var Subscription: any;
declare var StatusWidget: any;

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

  constructor() { }

  subscribe(items: string[], fields: string[]) {
        const subscription = new Subscription('MERGE', items, fields);
        subscription.setDataAdapter('QUOTE_ADAPTER');

        const lsClient = new LightstreamerClient(
            (document.location.protocol === 'https:' ? 'https' : 'http') + '://push.lightstreamer.com', 'DEMO');
        lsClient.connectionSharing.enableSharing('DemoCommonConnection', 'ATTACH', 'CREATE');
        lsClient.addListener(new StatusWidget('left', '0px', true));
        lsClient.connect();
        lsClient.subscribe(subscription);

        return subscription;
    }
}

html:

<table>
    <thead>
        <tr>
            <td>Name</td>
            <td>Last</td>
            <td>Time</td>
            <td>Change</td>
            <td>Bid Size</td>
            <td>Bid</td>
            <td>Ask</td>
            <td>Ask Size</td>
            <td>Min</td>
            <td>Max</td>
            <td>Ref.</td>
            <td>Open</td>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let row of stocks">
            <td *ngFor="let field of row; let i=index" [class.leftAlign]="fieldNames[i] === 'stock_name'">
                {{field}}
            </td>
        </tr>
    </tbody>
</table>

Answer 1

Make sure to use the last version of the demo Lightstreamer-example-StockList-client-angular2 updated to Angular 8.