How should I pass data from my service to snack bar component?

I have a snackbar component which I have created like this!

import Component, ViewEncapsulation, OnInit, OnDestroy from '@angular/core';
import
MatSnackBar,
MatSnackBarConfig,
MatSnackBarHorizontalPosition,
MatSnackBarVerticalPosition,
from '@angular/material';
import Subscription from 'rxjs';


import AuthenticationService from "../../services/authentication.service";


@Component(
selector: 'snack-message',
templateUrl: './messages.component.html',
styleUrls: [ './mesaages.component.scss' ],
encapsulation: ViewEncapsulation.None
)

export class SnackBarMessages implements OnInit, OnDestroy
action: boolean = true;
setAutoHide: boolean = true;
autoHide: number = 2000;
horizontalPosition: MatSnackBarHorizontalPosition = 'center';
verticalPosition: MatSnackBarVerticalPosition = 'bottom';
private showMessageSub: Subscription;
messageData: object;

addExtraClass: boolean = false;

constructor(public snackBar: MatSnackBar, public authenticationService: AuthenticationService)



ngOnInit()
this.messageData = this.authenticationService.getMessageData();
this.showMessageSub = this.authenticationService.getMessageListener()
.subscribe(data =>
this.messageData = data;
);
this.openMessageSnackBar(this.messageData);


openMessageSnackBar(data)
let config = new MatSnackBarConfig();
config.verticalPosition = this.verticalPosition;
config.horizontalPosition = this.horizontalPosition;
config.duration = this.setAutoHide ? this.autoHide : 0;
this.snackBar.open(data.message, data.action, config);


ngOnDestroy()
if (this.showMessageSub)
this.showMessageSub.unsubscribe();





I have added subject and i have created a subscription which listens to the messageListener in my Authentication Service. Then i call next with my subjectListener with the data I want to pass. I am not getting any call on my component. I don't understand why ? This is my Service!

import Injectable from '@angular/core';
import HttpClient from '@angular/common/http';
import Subject from 'rxjs';
import Router, ActivatedRoute from '../../../node_modules/@angular/router';
@Injectable(
providedIn: 'root'
)

export class AuthenticationService
private mesageListener = new Subject<object>();
private messageData: object;

getMessageListener()
return this.mesageListener.asObservable();


getMessageData()
return this.messageData;



createUser(email: string, password: string)
const userData: AuthModel =
email: email,
password: password

const requestPath = this.getModes()[`$this.navigatedFrom`];
this.http.post(`http://localhost:3000/api/$requestPath/signup`,userData)
.subscribe(response =>
this.messageData =
message: 'Sign Up Successful. Please Login now!',
action: 'Ok! Got it.'

this.mesageListener.next(this.messageData);
);





1 Answer
1

Try to use new BehaviorSubject<object>(null); for mesageListener .

new BehaviorSubject<object>(null);

you can see more details on Subject and BehavoiurSubject here : angular2-difference-between-a-behavior-subject-and-an-observable/

In Component subscribe to the value of Observable. It should work.

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.