Angular 2 subscribe not working

Question

I am trying to open modal window which has got it template and logic in diffrent component. I want to achieve this by subscribe to some observable but it is not working. It is my code

Component method from which I want to fire modal

import { Component, OnInit, EventEmitter } from '@angular/core';
import { MaterializeAction } from 'angular2-materialize';
import { Credentials } from "../shared/models/credentials.interface";
import { UserService } from "../shared/services/user.service";
import { Router, ActivatedRoute } from "@angular/router";
import { LoginComponent } from "../login/login.component";
import { ModalService } from "../shared/services/modal.service";

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
  modalActions = new EventEmitter<string | MaterializeAction>();

  errors: string;
  isRequesting: boolean;
  submitted: boolean = false;
  loged: boolean = !!localStorage.getItem('auth_token');;
  credentials: Credentials = { email: '', password: '' };

  constructor(private userService: UserService,
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private sharedService: ModalService) { }

  ngOnInit() {
  }

  openModal() {
    this.sharedService.showModalMethod();
  }

Service in which I call next methode

import { BrowserModule } from '@angular/platform-browser'
import { Injectable } from "@angular/core";
import { ReplaySubject } from "rxjs/ReplaySubject";
import { Observable } from "rxjs/Observable";

@Injectable()
export class ModalService {
    showModal$: Observable<any>;
    private showModal = new ReplaySubject<any>()

    constructor() {
        this.showModal$ = this.showModal.asObservable();
    }


    showModalMethod() {
        //It is comming here
        this.showModal.next('');
    }
};

Component in which I subscribe to

import { Subscription } from 'rxjs';
import { Component, OnInit, OnDestroy, EventEmitter } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Credentials } from "../shared/models/credentials.interface";
import { UserService } from "../shared/services/user.service";
import { MaterializeAction } from "angular2-materialize/dist";
import { ModalService } from "../shared/services/modal.service";




@Component({
  selector: 'app-login-form',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit, OnDestroy {

  private subscription: Subscription;
    private modalSubscription: Subscription;
  modalActions = new EventEmitter<string | MaterializeAction>();

  brandNew: boolean;
  errors: string;
  isRequesting: boolean;
  submitted: boolean = false;
  credentials: Credentials = { email: '', password: '' };

  constructor(private userService: UserService,
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private modalService: ModalService) {
    modalService.showModal$.subscribe((x) => {
      this.openModal();
    });
  }

I also provided my service in appModule, I have read about that it should be provided only i one module.

  providers: [
    AuthGuard,
    UserService, 
    ConfigService,
    DashboardService,
    ModalService
  ],

Answer 1

Try to create variable public modalSubscription: Subscription; variable and assign your modal service to it in your constructor. And make sure you include Subscription from rxjs

import { Subscription } from 'rxjs/Subscription';

public modalSubscription: Subscription; <----

constructor(private userService: UserService,
private router: Router,
private activatedRoute: ActivatedRoute,
private modalService: ModalService) {

  this.modalSubscription = modalService.showModal$.subscribe((x) => {
  //It is not comming here
  this.openModal();
  });
}