angular 2: using a service to broadcast an event

Question

I'm trying to get a button click in one component to put focus on an element on another component. (Frankly, I don't understand why this must be so complex, but I have not been able to implement any simpler way that actually works.)

I'm using a service. It doesn't need to pass any data except that the click occurred. I'm not sure how the listening component is meant to respond to the event.

app.component:

Skip to main content

import { Component } from '@angular/core'; import { SkipToContentService } from './services/skip-to-content.service';   export class AppComponent {     constructor(         private skipToContent: SkipToContentService     ) {}     }      skipLink() {         this.skipToContent.setClicked();     }  } 

login component:

<input type="text" name="username" />   import { Component, OnInit } from '@angular/core'; import { SkipToContentService } from '../../../services/skip-to-content.service';  export class BaseLoginComponent implements OnInit {      constructor(         private skipToContent: SkipToContentService         ) {     }      ngOnInit() {         this.skipToContent.skipClicked.subscribe(             console.log("!")             // should put focus() on input         );      } } 

skip-to-content.service:

import { Injectable, EventEmitter } from '@angular/core';  @Injectable() export class SkipToContentService {      skipClicked: EventEmitter<boolean> = new EventEmitter();       constructor() {     }      setClicked() {         console.log('clicked');         this.skipClicked.emit();     }; } 

I'm a bit lost here as to how logon will "hear" the skipClicked event.

Answer 1

First of all, use a BehaviorSubject instead of EventEmitter. Change the declaration of skipCliekd to the following:

skipClicked: BehaviorSubject<boolean> = new BehaviorSubject(false); 

Then, you need to broadcast the new value using next() method as following:

this.skipClicked.next (true); 

Also, change your subscription to:

 this.skipToContent.skipClicked.subscribe( value => {      if (value === true) {          console.log("!");           // should put focus() on input       }  });