title: Call function from one component from a component Angular
body: <p>I'm a beginner in Angular. I've been facing this issue with calling a method in a component from a component, which they are not related to. I followed a lot of tutorials on the internet but haven't found the solution.</p>
  <p>So the detail is:
  There are 2 unrelated components. The first component has a button and if I click that button, the string from the first component should be sent to a function in the second component and in that function It should display the string into the console. But the problem I'm facing here is that the function is called only once before I click and it just displays the value &quot;111&quot; which is the default value. Please help me</p>
  <p>First component:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export class FirstComponent implements OnInit{
    constructor(location:Location, private renderer : Renderer2, private element : ElementRef, private router: Router, private httpClient: HttpClient, private servic: MainService) {
    }
    clickMe() {
       this.servic.sendMessage("001");
    }
  }</code></pre>
  </div>
  </div>
  </p>
  <p>Second component:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export class SecondComponent implements OnInit {
    clickEventSubs:Subscription;
    constructor(public servic: MainService, private spinner: NgxSpinnerService, private router: Router){} 
      this.clickEventSubs = this.servic.receiveMessage().subscribe(message =&gt; {
        this.toggle(message);
      })
    public toggle(state: string){
      console.log(state);
    }
  }</code></pre>
  </div>
  </div>
  </p>
  <p>Shared service:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>@Injectable({
    providedIn: 'root'
  })
  export class MainService {
    private message = new BehaviorSubject&lt;string&gt;("111");
    sendMessage(mess:string) {
      this.message.next(mess);
    }
    receiveMessage(): Observable&lt;any&gt; {
      return this.message.asObservable();
    }
  }</code></pre>
  </div>
  </div>
  </p>