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

Question

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?

Answer 1

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