Attaching Event Listeners to a Specialized Class Instance

In each of my page classes, such as Home, I have specific HTMLElements. However, I want to trigger an event from the Home class that doesn't depend on any particular HTMLElement, allowing my app.js to respond accordingly.

For instance:

export class app {
  private home: Home;

  constructor() {
    super();
    this.home = new Home();
    home.addEventListener(HomeEvent.TEST, this.myFunction); 
    //HomeEvent.TEST is simply a static constant value "home-animation-event".
  }
}

While it may seem like a minor issue, I prefer not to directly link the event listener to a DOM element or make app extend HTMLElement. What would be the best approach for achieving this?

typescript

Answer №1

cherryblossom and smac89 have both provided solutions to the issue at hand. I decided to use extends EventTarget despite having some reservations about its drawbacks. I might consider using eventemitter3 as an alternative, although I'm feeling a bit hesitant due to the lack of updates in the library for the past 2 years.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

List in Angular remains empty

I am facing an issue with populating a simple HTML list using Angular. The problem arises when trying to display the data in the list. When I use console.log("getUserCollection() Data: ", data);, it shows an array which is fine, but console.log("getUser() ...

angulartypescriptngfor

Validation in Angular2 is activated once a user completes typing

My goal is to validate an email address with the server to check if it is already registered, but I only want this validation to occur on blur and not on every value change. I have the ability to add multiple controls to my form, and here is how I have st ...

javascriptangulartypescript

Using TypeScript to call a class method from within another function

Currently, I am working on an Angular 2 application and struggling to grasp the concept of TypeScript's this scope. Within my TypeScript class named SharedService, there is a function called handleError. If this function encounters a 401 status, I wa ...

angulartypescript

Is there a mistake in how I am creating this TypeScript object?

After selecting an item from a dropdown menu, I want to remove the select element and display the selected item in an ag-grid. Although the row is added to the grid successfully, the name/id properties do not appear correctly and the select element remains ...

angulartypescript

What is the best way to style an element while working on a CSSStyleDeclaration prototype?

Instead of using element.style.removeProperty(property) to remove properties one at a time, I have created a utility function that can remove multiple properties at once. By extending CSSStyleDeclaration.prototype. Snippet: declare global { interface CS ...

javascripttypescript

How can we design a return type for a function in Typescript that enforces the exact keys present in the input array K[] to be included in the Record?

I have a function that takes an array of Animals, and returns a map where the keys are the animals and the values are their fur colors: export enum Animals { CAT = 'CAT', DOG = 'DOG', SEAL_PUP = 'SEAL_PUP', } const furC ...

typescript

What is the best way to fetch the data from this API?

function fetchCoinPrice(coinName) { return axios .get( `https://min-api.cryptocompare.com/data/pricemulti?fsyms=${coinName}&tsyms=EUR` ).then((response) => (response.data[coinName]["EUR"])); The JSON response for the coin "BTC" is: ...

javascriptangulartypescriptobservablesubscriber

What is the method for invoking a class method in Typescript from another method within the same class acting as an event handler?

I came across this TypeScript code that I need help with: class MyClass { constructor() { $("#MyButton").on("click", this.MyCallback); this.MyMethod(); } MyCallback = () => { $.ajax("http://MyAjaxUrl") ...

jqueryajaxclasseventstypescript

Is it possible to specify the data type of form control values when using the Angular Reactive form builder?

Is it possible to use typed reactive forms with Angular form builder? I want to set the TValue on the form control to ensure we have the correct type. For example: public myForm= this.fb.group({ name: ['', [Validators.required, Validators.max ...

angulartypescriptangular-reactive-formsformbuilder

Issue with NullInjectorError: Failure to provide a custom component - Attempting to add to providers without success

I keep encountering errors during my test attempts... Despite looking into similar issues, I am still facing problems even after adding my custom LoginComponent to app.module.ts providers. It is already included in the imports section. app.module.ts @Ng ...

javascriptangulartypescript

Challenges encountered when retrieving parameters from union types in TypeScript

Why can't I access attributes in union types like this? export interface ICondition { field: string operator: string value: string } export interface IConditionGroup { conditions: ICondition[] group_operator: string } function foo(item: I ...

javascripttypescript

Can path mappings be utilized across various referenced projects?

Struggling with setting up path mapping between two different typescript projects within a yarn workspace configuration. There are 2 separate projects in the yarn workspace, resulting in the following folder structure: packages ├── common │   ...

javascripttypescriptyarnpkgtsc

Tips on preventing Realtime database onWrite trigger function callback from iterating through data that has been altered

I am currently developing a 1 vs 1 game matching system using a real-time database. The system works by creating a record in the users table when a user signs in. Once there are two players with a status of placeholder, a cloud function generates a gameInf ...

typescriptfirebase-realtime-databasegoogle-cloud-functionsonline-game

What is the correct way to type this?

Looking for some help with my React Component: const CustomIcon = ({ icon, ...props }: { icon: keyof IconType }) => { const Icon = Icons[icon] return <Icon {...props} /> } I'm attempting to use it like this: <CustomIcon icon={normalTe ...

javascriptnode.jstypescripttypes

Utilizing the Literal Form of a Generic Object Parameter

I'm looking for a way to modify the return type of a function that accepts a generic object. I want the return type to be identical to the object passed in, but narrowed down similar to how `as const` assertions work. For example, if I call the funct ...

typescriptgenericscastingconstantsnarrowing

A function that can handle either a generic data type or an array containing elements of the same data type

function process<Type>(input: Type | Type[]): Type { if (Array.isArray(input)) { // input here is definitely Type[] return input.map((element) => process(element) /* <- this error message is saying 'Type[]' is not the ...

typescripttypes

Using Typescript and Webpack - Make sure you have the right loader set up to handle this specific file type, as at the moment there are no loaders configured to process

I've encountered an issue while setting up Webpack for Typescript and React. Upon executing the NPM script: webpack serves ./webpack/webpack.config.ts --open, an error surfaced in the console: https://i.sstatic.net/xqpUV.jpg Below are the details of ...

javascriptreactjstypescriptwebpack

Waiting for variable to become false using Angular 7 Observable

The observable below highlights the authentication process: import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { CookieService } from 'ngx-cookie-service'; import { Observabl ...

angulartypescriptpromiseobservableangular7

Angular 2 is throwing an error stating that the argument 'ElementRef' cannot be assigned to the parameter 'ViewContainerRef'

I'm developing an Angular 2 application with angular-cli, but when I include the following constructor, I encounter the following error: Error Argument of type 'ElementRef' is not assignable to parameter of type 'ViewContainerRef&apos ...

typescriptangular

Using TypeScript classes along with functions to capture JSON data

When working with reactive forms, I encountered an issue understanding how data is mapped to form controls. Let's consider an object control with id and name properties, displayed as an input textbox where the user inputs the id. Utilizing autocomplet ...

angulartypescriptangular-reactive-forms