Emit events between nested components grandchild to root component

Question

I have wheels.component nested to car.component.

wheels.component:

export class WheelsComponent {    
    @Output() onLoaded : EventEmitter<string>() = new EventEmitter<string>();

    private downloadAllFiles(url: string) {
        this.onLoaded.emit('Hello, World 1!');
        //some operations to wait
        this.onLoaded.emit('Hello, World 2!');

    };
}

Component car.component is not written at html page, but called through routing at car-routing.module.ts:

@NgModule({
    imports: [
        RouterModule.forChild([
            {
                path: 'sfactmessage/:id',
                component: CarComponent,
                resolve: {
                    card: cardResolver
                }
            }
        ])
    ],
    exports: [RouterModule]
})
export class CarRoutingModule {}

What I want is to handle event emitted from wheels.component, not at car.component, but at app.component.

Is it possible to handle event at app.component?

The plunker sample is not working (sorry, this is my first plunkr example), but gives a view how my app is arranged.

Answer 1

Hello_ friend.

So basically if you want to use events globally in your application you can use a Service in combination with EventEmitter

In this case you create a service for example car.service.ts

import { Injectable, EventEmitter } from '@angular/core';
@Injectable()
export class CarService {
  onLoaded : EventEmitter<string> = new EventEmitter<string>();
}

Then use this service in a child component to emit events like this wheels.component.ts

import { Component, EventEmitter } from '@angular/core';
import { CarService }  from './car.service';
@Component({
    selector: 'wheels',
    template: '<a (click)="sendValues()"> Click me to send value </a>'
})
export class WheelsComponent {

    constructor(private carService:CarService ){}

    sendValues() {
       /* Use service to emit events that can be used everywhere in the application */
        this.carService.onLoaded.emit('Button in WheelsComponent was clicked ...');
    }; 
}

and then capture this event from AppComponent for example app.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { CarService }  from './cars/car.service';
import { Subscription }  from 'rxjs';

@Component({
  selector: 'my-app',
  templateUrl: `src/app.component.html`
})
export class AppComponent implements OnInit, OnDestroy{ 
  private subscription: Subscription;
  private loading = true;
  name = 'Angular'; 

  constructor(private carService: CarService){} 

  ngOnInit(){
    this.subscription = this.carService.onLoaded.subscribe((message) => {

      /*
        Here you receive events from anywhere where
        carService.onLoaded.emit() is used
      **/

        alert(`From AppComponent -> ${message}`);
    });
  } 

  ngOnDestroy(){
    /* Don't forget to unsubscribe when component is destroyed */
    this.subscription.unsubscribe();
  }
}

I M P O R T A N T______________

If you want your service to work globally you need to declare it in the top level providers for example app.module.ts is a good place:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent }  from './app.component';
import { CarComponent} from './cars/car.component';
import { WheelsComponent} from './cars/wheels.component';
import { HomeComponent} from './home.component';
import { routing }  from './app.routing';
import { CarService }  from './cars/car.service';

@NgModule({
  imports: [ BrowserModule, FormsModule, routing ],
  declarations: [ AppComponent, CarComponent, WheelsComponent, HomeComponent ],
  providers: [ CarService ], // <-------- SEE HERE
  bootstrap: [ AppComponent ]
})
export class AppModule { }

CLICK HERE TO SEE THE DEMO