Angular EventEmitter from component to app.component

Question

I would like to bind an event emitter from a child to a parent component, but the parent component is the 'app.component'so i assume that the relationship between the two is not declared but implicit.
in this answer , i see how to add an event emitter to a child that has been explicitly declared as such, in his parent:

<child (notifyParent)="getNotification($event)"></child>

But in my app, the child component (lets call id: child), is not declared in that way, but its declared in the app.module as route:

const appRoutes: Routes = [
  { path: '**',      component:  Child}
];

This component basically represents a splash page to the site, and is also used as a redirect in a guard in case full authentication is not provided.
What i would like to do, is to add an event emitter to child that notifies app.module of a change.
I have already implemented, in child an EventEmitter with the @Output() decorator, and i have also implemented the method that will be invoked in app.module but i just cant find a place where to register this binding within the two components.
Since all components are children of app.component should not app.component provide a way to register for incoming input from its children, without the need of declaring them explicitly as children first?

Check out my answer. its a different approach and I think can be helpful — Shashank Vivek

Shashank Vivek Shashank Vivek · Accepted Answer · 2018-04-18T11:50:40

Well, from my understanding you'll have to explicitly bind the app.component and child.component to actually make the Event emitter work.

From your scenario, you can also consider using Subject to achieve the same. You dont have to explicitly define for every child.component, rather you can simply Subscribe and listen to any changes that are happening.

I have created one link to help two sibling & parent components talk. You can do the same for Several child and one parent

app.component.html

<br />
Enter a name:
<input type="text" [(ngModel)]="myTextVal">
<button (click)="sendTextValue()">Click Me to emit to Hello Component</button>
<hello></hello>

app.component.ts

export class AppComponent  {
  myTextVal: string;

  constructor(private appService: AppService){}

  sendTextValue(){
    this.appService.passValue(this.myTextVal);
  }
}

app.service.ts

@Injectable()
export class AppService {

  public stringSubject = new Subject<string>();

  passValue(data) {
    //passing the data as the next observable
    this.stringSubject.next(data);
  }

}

hello.component.ts


@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
  name: string;

  constructor(private appService: AppService) {

  }

  ngOnInit() {
    this.appService.stringSubject.subscribe(
      data => 
      {
        console.log('next subscribed value: ' + data);
        this.name = data;
      }
    );
  }
}

Angular EventEmitter from component to app.component

3 Answers