Event Listening and Updates in Angular
Learn to import type definitions for micro-event-bus, listen to domain events, and update the screen in our Angular application.
The only remaining thing to do in our Angular application is to listen to any domain events that are raised from our Vue front-end. Again, we will need to use the
declaration files for our micro-event-bus
library by importing them through npm
as
follows:
npm link micro-event-bus
Here, we are importing the type definitions for our micro-event-bus
library into our Angular application. We can now listen to events by updating our angular-app/src/app/app.component.ts
file as follows:
Press + to interact
import { MicroEventBus } from 'micro-event-bus';export let microEventBus: MicroEventBus =(window as any).microEventBus;export class AppComponent {// Existing class member variablesconstructor(broadCastService: AngularBroadcastService,private scriptLoaderService: ScriptLoaderService,private cd: ChangeDetectorRef) {_.bindAll(this, ["onLoginClicked","onLoginEvent","toggleCheckoutOnly","toggleContinueShopping","togglePlaceOrder"]);// Internal broadcast event listenersmicroEventBus.on("checking-out").subscribe(this.toggleCheckoutOnly);microEventBus.on("continue-shopping").subscribe(this.toggleContinueShopping);microEventBus.on("place-order").subscribe(this.togglePlaceOrder);}// Existing functionstoggleCheckoutOnly() {this.shoppingCartStyles = "split";this.hideProducts = true;this.cd.detectChanges();}toggleContinueShopping() {this.shoppingCartStyles = "split right";this.hideProducts = false;this.cd.detectChanges();}togglePlaceOrder() {this.hideShoppingCartRegion = true;this.hideProducts = true;this.hideOrderPlaced = false;this.cd.detectChanges();}}
...
Get hands-on with 1400+ tech skills courses.