How do I push data from a Subject observable to an array in the component?

user_10013648 0
Viewed 339

I am trying to push a message into an array that is already declared as a variable in the component. I am using a service and have created a subject observable to take data from one component and inject it into another component. When I try to push the data onto the array after subscribing to the variable, it's updated temporarily but when I open that component, the data is not pushed. The array updates when I console log from inside the subscribe method but it's reset once I open that component. I don't know what is the problem. This is the code:

Service.ts

import { Injectable } from '@angular/core';
import { User } from './user';
import { Subject } from 'rxjs';

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

  private message = new Subject<string>();

  sourceMessage$ = this.message.asObservable();

  constructor() { }

  sendMessage(message: string) {
    this.message.next(message);
  }
}

Receiver component

import { Component, OnInit } from '@angular/core';
import { SerService } from '../ser.service';
import { User } from "../user";

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  public messages = ['hi', 'hello', 'bye'];

  constructor(private _service: Service) { }

  ngOnInit() {
    this._service.message$
      .subscribe(
        message => {
          this.messages.push(message);
        }
      );
  }
}

Sender Component

import { Component, OnInit } from '@angular/core';
import { SerService } from '../ser.service';
import { User } from '../user';

@Component({
  selector: 'app-sign-up',
  templateUrl: './sign-up.component.html',
  styleUrls: ['./sign-up.component.css']
})
export class SignUpComponent {

  userModel = new User('', '', '', '', false);

  constructor (private _service : SerService) {}

  onSubmit(){
      this._service.sendMessage(this.userModel.message);
  }

}

I can't update the message array. How do I do this with minimal changes?

angular typescript javascript
1 Answers

You can create a service to send data from one component to another by using BehaviourSubject

Service:

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

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

  private userDetails = new BehaviorSubject<any>('');
  currentUserDetails = this.userDetails.asObservable();

  constructor() { }

  sendUserDetails(message){
    this.userDetails.next(message)
  }
}

Sender Component:

import { DataService } from '/services/data.service';

export class SignupComponent implements OnInit {

  public userDetails;

  constructor(private _dataService: DataService) {}

  ngOnInit(){
    userDetails = new User('', '', '', '', false);
    this._dataService.sendUserDetails(this.userDetails);
  }

}

Receiver Component

import { DataService } from '/services/data.service';

export class LoginComponent implements OnInit {

  public userDetails;

  constructor(private _dataService: DataService) {}

  ngOnInit(): void {
    this._dataService.currentUserDetails.subscribe(userDetails => this.userDetails = userDetails);
  }

Blockquote

user_136623390
Related