Invoking event emitter within a promise in Angular 2

My event emitter is not functioning properly within a promise's then method. No errors are being generated, it just won't execute.

In the child component:

@Output() isLoggingIn = new EventEmitter<boolean>();

onLogin() {
  this.isLoggingIn.emit(true); //<-- This works.
  this.authService.loginUser(this.loginForm.value)
    .then( () => { 
      console.log(this.isLoggingIn.emit); //<-- Method gets logged.
      this.isLoggingIn.emit(false); //<-- This does not work!
    })
    .catch( (err) => console.log(err) );
}

This is the HTML template of the parent component, header.component.html:

<tas-loginform
  (isLoggingIn)="setLoginLoading($event)"
  *ngIf="!isSigningUp">
</tas-loginform>

This is the TypeScript code of the parent component, header.component.ts:

setLoginLoading(bool: boolean) {
  console.log(bool);
  this.loginLoading = bool;
}

The Event Emitter in the promise's .then callback seems to never be called at all since the console.log in setLoginLoading is not executed. The lack of error messages adds to the confusion.

Answer №1

My authentication state was becoming corrupted due to an issue with routing in my project. It's a strange problem that I can't quite put into words, but removing the routing feature completely resolved it and now everything is functioning perfectly.

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

I seem to be missing some properties in the request body schema. Why am I receiving an incomplete model for

Seeking assistance in grasping the working of models in loopback4. Here's a model I defined: @model() export class ProductViewConfig extends BaseConfig { @property({ type: 'string', id: true, generated: true, }) _id?: strin ...

Update the UI with changes from the BehaviorSubject after receiving the HttpClient response

I am currently working on a small service that makes a POST request to the backend. The response from this POST request should be added to a BehaviorSubject which is then used in various parts of the Angular application. While I can see a new record being ...

Implementing Class-based Dependency Injection in Express

Incorporating Express into a TypeScript project has presented me with a particular scenario Here is my route file: ... import findAllUsersFactory from "src/factory/FindAllUsers"; routes.get("/users", findAllUsersFactory().handle); ... ...

Error encountered: The build failed due to the presence of two distinct types sharing the same name, however, they

Encountering an error during the build of my JHipster Angular project [ERROR] Error at /Users/Dan/work/gba/node_modules/ng-jhipster/src/interceptor/interceptable-http.d.ts:4:22: Class 'InterceptableHttp' incorrectly extends base class 'Http ...

Angular Error: Unable to process _this.handler.handle as a function

While running my tests in Angular, I encountered an error: TypeError: _this.handler.handle is not a function at MergeMapSubscriber.project (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/common/esm5/http.js:1464:80) at MergeM ...

transmitting biscuits in an Angular application and managing Access-Control-Allow-Origin during development phase

Currently, I am developing two Angular apps that are running on different ports: https://app.example.com:4202 and https://app2.example.com:4203. Both of these apps rely on a backend located at https://example.com. Within my backend PHP pages, there is a u ...

New approach in Typescript: Enhancement of child class with additional Event Listener overloads

One of my classes is structured like this: interface A extends EventEmitter{ on(event: "eventA", listener: () => void): this; } There is another class defined as follows: interface B extends A{ on(event: "eventB", listener: ...

Troubleshooting Docker Angular+Nginx: Decoding the Mystery Behind Error Codes 403 and

Backend of my .net application is running on mssql and frontend is built with Angular. I have successfully configured Docker files and nginx.conf, but I am facing an issue specifically with Angular 17 within Docker. The main problem is that, when accessing ...

What is the best way to define a signal within a class interface in Angular 17?

I’m working on setting up signals for my properties in class, which has been going smoothly so far. public varName = signal(''); However, I would also like to utilize the related interface. Unfortunately, I have not come across any documentati ...

Creating an ESNext JavaScript file and integrating it into an Angular 2 project: A comprehensive guide

I am facing an issue with my js file named UserService.js and source.js, which has been transformed using transformer typescript. My objective is to integrate this transformed js file into Angular. UserService.js import { Source } from "./source" ...

Invoke a function within the <img> tag to specify the source path

I have been attempting to achieve something similar to the following: <img id="icon" class="cercle icon" src="getIcon({{item.status}})" alt=""> This is my function: getIcon(status){ switch (status) { case 'Ongoing': ret ...

Utilizing the .finally method on a promise that is already being handled with try/catch statements elsewhere may lead to an UnhandledPromiseRejection

Recently, I've come across an unexpected behavior while working with nodejs. To illustrate this strange occurrence, let's consider the following example: Imagine we have two functions, foo and bar. The foo function creates a promise, attaches a ...

What is the best way to hold out for a specific number of promises to be fulfilled and halt the resolution of any others

While working in TypeScript, I need to create around 100 instances of Promise. However, I am only interested in waiting for the resolution of 5 of them. Any promises beyond that can either be canceled (if feasible) or rejected since they are no longer requ ...

Exploring Variables in Angular 11 HTML: A Guide to Debugging

The challenge In my Angular 11 web app, I am trying to troubleshoot and inspect the variables within the HTML code. While I have managed to retrieve the ctx.ngForOf variable, I feel like there is something missing in my process that I can't quite pi ...

Clearing transformation offset in Angular Material Drag and Drop

In my web application, I am working with a <div> element that has the CSS property position: absolute, placed inside a container with position: relative. The left and top properties of this element are linked to data X and Y in the backend component. ...

What are the best practices for integrating PrimeVue with CustomElements?

Recently, I decided to incorporate PrimeVue and PrimeFlex into my Vue 3 custom Element. To achieve this, I created a Component using the .ce.vue extension for the sfc mode and utilized defineCustomElement along with customElements.define to compile it as a ...

What could be causing TypeScript to display errors in unexpected locations while inferring inner types?

I encountered a rather intricate issue that's challenging to sum up in a brief title, my apologies for that. I devised a function that accepts a generic params type and returns a result type constructed from the params type. It utilizes string literal ...

Notify programmers about the potential risks associated with utilizing certain third-party components

Incorporating a 3rd party library into our codebase involves utilizing its components directly, although some are enclosed within internally created components. Is there a method available to alert developers when they try to use one of the wrapped compone ...

"Encountered an error in Angular: ContentChild not found

Working with Angular 5, I am attempting to develop a dynamic component. One of the components is a simple directive named MyColumnDef (with the selector [myColumnDef]). It is used in the following: parent.compontent.html: <div> <my-table> ...

Having trouble finding the module for declaration in ASP.NET Core with Angular?

Encountering issues while attempting to create new Angular components with the command ng g component login-form Error finding module for declaration. No module files located. It seems that the angular CLI is throwing errors due to the differing file ...