0

I have implemented angular 8 snack bar using the default snackbar in angular. However I have an excel extraction happening on the server that i would like to report its progress...I am implementing signalR to send the progress to the client, but not sure how to keep the snackbar alive to show the message (without recreating the snackbar). I was able to achieve it in angularjs using a toaster. Any advice on how to achieve this?

constructor(    
    private _snackBar: MatSnackBar,
    private _ngZone: NgZone) 
    {}

  public startConnection() {

    this.hubConnection = new signalR.HubConnectionBuilder()
      .withUrl("https://localhost:5001/Signal").build();

    this.hubConnection.start().then(() => {      
      this._snackBar.open("connection started");
    }).catch(err => console.log(err));

    this.hubConnection.onclose(() => {
      setTimeout(() => {
        this.hubConnection.start().then(() => {
          console.log("connection started");
        }).catch(err => console.log(err));
      }, 5000);
    });

    this.hubConnection.on("clientMethodName", (data) => {

      this._snackBar.open('Data returned from server '+ data);
      console.log(data);
    });

    this.hubConnection.on("WelcomeMethodName", (data) => {

      console.log(data);
      this.hubConnection.invoke("GetDataFromClient", data).catch(err => console.log(err));
    });   
  }
Kiril1512
  • 3,231
  • 3
  • 16
  • 41
olufikayo olowoyo
  • 37
  • 2
  • 11
  • You need to pass the timer to the snackbar. – Kiril1512 Mar 09 '20 at 09:45
  • Thanks, I know i can use the timer to keep it alive, but how do i update the snackbar message to show the progress on the sever... – olufikayo olowoyo Mar 09 '20 at 10:09
  • Assign the var that receives the data to the snackbar, and subscribe it from the snackbar. – Kiril1512 Mar 09 '20 at 10:18
  • Thank, can you show a sample code to achieve that...Im just abit confused as to what you mean. – olufikayo olowoyo Mar 09 '20 at 10:45
  • Yes, you can read more about it here: https://medium.com/@billingpuneet.13/how-to-subscribe-to-a-variable-in-angular-7-1ec7087c3e9a – Kiril1512 Mar 09 '20 at 11:18
  • @Kiril1512,thanks for the response... I am however unable to relate to what you have proposed. In my understanding ` this.hubConnection.on("NotificationProgress", (type: string, payload: string) => { this._snackBar.open(payload); // **How do I subscribe to the payload from here without recreating this snackbar everytime a new data comes in** }); ` – olufikayo olowoyo Mar 10 '20 at 12:54

0 Answers0