Getting undefined value from service in angular 12

Question

I am new to angular and I'm getting undefined value in variable after calling he service which gets the value from other component.

I am trying to send file data from one component to other using service but at the receiving component I am getting undefined value in function can someone help me with this..

1.) Sending file data as string from this component's function.

sendFile() {
    let file = this.addressDetails.value.fileSource;;
    //console.log(file);
    
    //this._sendFiles.sendFiledetails(file);
    return new Promise((resolve, reject) => {
      const reader = new FileReader()
      reader.onloadend = () => {
        resolve(reader.result)
         console.log(reader.result);
        this.stringFile = JSON.stringify(reader.result);
      };
      reader.onerror = reject;
      reader.readAsDataURL(file);
    }).then((result) => {
      this.stringFile = result;
      console.log(this.stringFile);
      
      this._sendFiles.sendFiledetails(this.stringFile);
      //this.route.navigate(['/payment']);
    });
  }

2.) This is my Service's function

export class SendFileAttachmentService {
  private _file = new Subject<any>();
  getFile$ = this._file.asObservable();
  sendFile: any;
  constructor() { }
  
  sendFiledetails(file: any) {
    //console.log(file);
    this._file.next(file);
    
    this.sendFile = file;
  }

  getFiles() {
    //console.log(this.sendFile);
    
    return this.sendFile;
  }
}

3.) This is my receiving component's function where trying to receive file data

 recieveFile() {
    this.getFiles = this._sendFile.getFiles();
    let file = this.getFiles;
    console.log("files:" + this.getFiles);
    return this.getFiles;
  }

Are you including `{ providedIn: 'root' }` in your service's `@Injectable()`? Also, could you reproduce in a [StackBlitz](https://stackblitz.com/fork/angular-ivy)? This will make it easier for others to help you :-) — BizzyBob, Apr 10 '22 at 13:44
How do you know that the *emitting* component as done reading the file? I believe that your problem is that you are reading the service `sendFile` property too soon. Instead, what you could do is listen for changes through the service `getFile$` observable. Also, it would be very helpful if you would share with us the content of the logs in your code. — David Fontes, Apr 10 '22 at 14:59
@DavidFontes the problem is I consoled log in the getFiles() function it is returning undefined value have used this as reference [link] (https://stackoverflow.com/questions/56319967/send-a-json-from-one-component-to-another-without-being-seen-in-the-url-of-the-t/56320157) — Ashish_more, Apr 10 '22 at 15:43
Check out my answer below, it should help you to solve your problem. — David Fontes, Apr 10 '22 at 17:22

David Fontes · Accepted Answer · 2022-04-10T17:31:42.590

On the receiving component, instead of invoking the method recieveFile, you should subscribe to the getFile$ observable instead. Check out the example below:

@Component({ ... })
export class ReceivingComponent implements OnInit, OnDestroy {
  getFiles = null;
  sub: Subscription | null = null;

  constructor(private _sendFile: SendFileAttachmentService ) {}

  ngOnInit() {
    this.sub = this._sendFile.getFile$.subscribe(files => {
      // When this code gets executed it should have the value
      // emitted from the emitting component.
      this.getFiles = files;
    });
  }

  ngOnDestroy() {
    // Lets not forget to unsubscribe the subscription we made above.
    this.sub.unsubscribe();
    this.sub = null;
  }
}

Check out this StackBlitz for a full working demo.

Getting undefined value from service in angular 12

1 Answers1