After assinging data to a variable in a subscribe methode, the data is gone once the method is...

I'm using the library signature_pad and if I draw a line, the method toDataURL() gives back a string. I've got a MessagingService where I have a method to send a string between unrelated Angular components. The idea is to assign the datastring to the img src. When I hardcode a previous dataURL into my PdfPageComponent the line I drawed shows up. However, when I try to send the data with my messageService something goes wrong. When I console log the message, I can see the string is send over correctly. The problem is when I try to assign that data to the variable signatureImg. Once again when I assign it, the console.log() tells me it's good. But when I click on my onShowSignatureButtonClick() the string is gone, and I'm getting a undefined. I realise its probably an issue with Observables and the 'waiting' period. I already googled it and tried a bunch of things I found here, but nothing seems to work.

This is the PDF page, in here the signatureImg string should be the string I'm getting from my MessagingService

import { Component, OnInit, SimpleChanges, OnChanges } from '@angular/core';
import { MessagingService } from '../messaging.service';
import { Observable } from 'rxjs';

@Component({
selector: 'app-pdf-page',
templateUrl: './pdf-page.component.html',
styleUrls: ['./pdf-page.component.scss']
})
export class PdfPageComponent implements OnInit {

signatureImg: string;
constructor(private _messaging: MessagingService) { }

ngOnInit() {
this._messaging.signatureDataUrl$
.subscribe((message) => {
this.signatureImg = message;
// console.log(this.signatureImg, "signatureImg in subscribe onint");
});
}

onShowSignatureButtonClick() {
console.log(this.signatureImg, "signatureImg"); //Gives undefined
}
}



This is my MessagingService, in here I got the sendDataUrl() which is responsible for sending the string.

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

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

private signatureDataUrlSource = new Subject<string>();
signatureDataUrl$ = this.signatureDataUrlSource.asObservable();

constructor() { }

sendDataUrl(dataUrl: string) {
return this.signatureDataUrlSource.next(dataUrl);
}

}


This is the page where somebody can draw something using the signature_pad library.

import { Component, OnInit, ViewChild } from '@angular/core';
import { SignaturePad } from 'angular2-signaturepad/signature-pad';
import { Router } from '@angular/router'
import { MessagingService } from '../messaging.service';

@Component({
selector: 'app-sign-page',
templateUrl: './sign-page.component.html',
styleUrls: ['./sign-page.component.scss']
})
export class SignPageComponent implements OnInit {

@ViewChild(SignaturePad, {static: false})
signaturePad: SignaturePad
signatureImg: any;

private signaturePadOptions: Object = { // passed through to szimek/signature_pad constructor
'minWidth': 5,
'canvasWidth': 500,
'canvasHeight': 300,
};
constructor(private router: Router, private _messaging: MessagingService) { }

ngOnInit() {
}

confirmSignature(){
this.signatureImg = (this.signaturePad.toDataURL())
this._messaging.sendDataUrl(this.signaturePad.toDataURL().toString());
this.router.navigateByUrl("/pdfpage");
}

//Rest of the code

Continue reading...