Mastering TypeScript/

...

/

Event Listening and Updates in Angular

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.

We'll cover the following...

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 variables
    constructor(
        broadCastService: AngularBroadcastService,
        private scriptLoaderService: ScriptLoaderService,
        private cd: ChangeDetectorRef
    ) {
        _.bindAll(this, [
            "onLoginClicked",
            "onLoginEvent",
            "toggleCheckoutOnly",
            "toggleContinueShopping",
            "togglePlaceOrder"
        ]);
        // Internal broadcast event listeners
        microEventBus.on("checking-out")
            .subscribe(this.toggleCheckoutOnly);
        microEventBus.on("continue-shopping")
            .subscribe(this.toggleContinueShopping);
        microEventBus.on("place-order")
            .subscribe(this.togglePlaceOrder);
    }
    // Existing functions
    toggleCheckoutOnly() {
        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();
    }
}

Here, we have made a few changes to our AppComponent class.

  • Firstly, we have created a global variable named microEventBus, just like in both our React and Vue applications.

  • Secondly, we now have a dependency on an Angular internal service named ChangeDetectorRef, which we will discuss next. ...