The function is failing to trigger when clicked within an Angular 5 app

Question

The function is failing to trigger when clicked within an Angular 5 app

Hey everyone, I'm facing a minor issue with my Angular 5 project. I am trying to use a common session check method from a shared TypeScript file. This method is used both when the page loads and when the logout button is clicked to redirect the user to the login page. Strangely, it works fine when the page first loads but throws an error of 'undefined' when the button is clicked. Any help would be greatly appreciated. Thank you!

Dashboard https://i.sstatic.net/wvq1Q.jpg Imported https://i.sstatic.net/92kpK.png

javascript angular typescript angular5

Answer 1

Answer №1

this within the function() { ... } declaration does not refer to your component, but to the function's context. To ensure that the context remains bound to your component, consider using an arrow function:

logout() {
  session.signOut().then(() => {
    this.s.checkIfSignedIn();
  });
}

Additionally, it is recommended to remove the var keyword when declaring a class variable like u.

Some extra tips:

Avoid disregarding editor/linter warnings (e.g., to avoid errors when accessing global objects such as gapi, declare them first as shown here: declare const gapi: any;)
Maintain proper code indentation for readability
Choose descriptive variable names instead of generic ones like a or u to enhance code clarity (consider using existing variables like utils instead of creating new ones)

Answer 2

this within the function() { ... } declaration does not refer to your component, but to the function's context. To ensure that the context remains bound to your component, consider using an arrow function:

logout() {
  session.signOut().then(() => {
    this.s.checkIfSignedIn();
  });
}

Additionally, it is recommended to remove the var keyword when declaring a class variable like u.

Some extra tips:

Avoid disregarding editor/linter warnings (e.g., to avoid errors when accessing global objects such as gapi, declare them first as shown here: declare const gapi: any;)
Maintain proper code indentation for readability
Choose descriptive variable names instead of generic ones like a or u to enhance code clarity (consider using existing variables like utils instead of creating new ones)

Answer 3

Answer №2

The declaration is done using var and the call is made using this. Since it's not a component property, it explains why it's not functioning as expected.

Answer 4

The declaration is done using var and the call is made using this. Since it's not a component property, it explains why it's not functioning as expected.

Answer 5

Answer №3

When working within a promise, the scope changes.

signOutUser() {
 let self = this;
 var sessionData = gapi.auth2.getAuthInstance();
 sessionData.signOut().then( function() {
   localStorage.clear();
   self.updateSignInStatus();
  });
}

Answer 6

When working within a promise, the scope changes.

signOutUser() {
 let self = this;
 var sessionData = gapi.auth2.getAuthInstance();
 sessionData.signOut().then( function() {
   localStorage.clear();
   self.updateSignInStatus();
  });
}

The function is failing to trigger when clicked within an Angular 5 app

Answer №1

Answer №2

Answer №3

Similar questions

Acquire the value of ant-design Select dropdown upon hover

Ways to automatically update property value in MongoDB once a particular date is reached

5 steps to create a versatile function for activating attributes based on their values

Is there a method to implement retries for inconsistent tests with jest-puppeteer?

Having trouble resolving all parameters for the component xyz: (?, ?) after the upgrade to Angular 2 CLI

"Encountered a roadblock while attempting to utilize the applyMatrix

Issue with Three.js CanvasRenderer not displaying Mesh when using multiple materials

How can I prevent an Angular 2+ app from loading until the APP_INITIALIZER has completed its execution?

In JavaScript, capture data returned from a function in a separate variable using a POST REST API call

HighCharts.js - Customizing Label Colors Dynamically

The disappearing act of the Show/Hide Button in Sencha Touch 2.3.1: what's the

What is the method for determining the level based on the provided experience points?

A method to access a stored value in localStorage that does not involve utilizing the __zone_symbol__value property

Merge MathJax into SystemJS compilation

Error occurred in next.js environment file when referencing process.env keys as strings in .env.local file

When attempting to send emails, SendGrid encounters an error and fails to provide an error code

Toggle sidebar: expand/collapse

Experiencing difficulty converting a JSON array to a C# list during deserialization

Obtain the dynamic identifier of an element within every block using jQuery in a rails application

How can I include a <label></label> in each column header when using Material Table React?