Emit Events Between Nested Components Grandchild To Root Component

I have wheels.component nested to car.component. wheels.component: export class WheelsComponent { @Output() onLoaded : EventEmitter() = new EventEmitter

Solution 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()
exportclassCarService {
  onLoaded : EventEmitter<string> = newEventEmitter<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>'
})
exportclassWheelsComponent {

    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`
})
exportclassAppComponentimplementsOnInit, OnDestroy{ 
  privatesubscription: 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 HEREbootstrap: [ AppComponent ]
})
exportclassAppModule { }

CLICK HERE TO SEE THE DEMO

Share