change the name of the user upon logging in

An Angular application allows users to login with their email and password. I want the current user's information to be displayed in app.component.html using localStorage when they are logged in. All user data is retrieved from a MySQL database.

Here is the code:

auth.service.ts:

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor() { }

  getUserDetails() {
    if(localStorage.getItem('userData')){
      return localStorage.getItem('userData')
    } else{
      return null
    }
    
  }
  
  setDataInLocalStorage(variableName, data) {
      localStorage.setItem(variableName, data);
  }
  
  getToken() {
      return localStorage.getItem('token');
  }
  
  clearStorage() {
      localStorage.clear();
  } 
}

Answer №1

Revision

fetchUser() {
    if (localStorage.getItem('userInfo')) {
        return localStorage.getItem('userInfo');
    } else {
        return null;
    } 
}

To Retrieve Data

fetchUser(variableName) {
    return localStorage.getItem(variableName);
}

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

Using the default theme in Material UI5

Could someone please explain how to pass in the default theme in Material UI5? In Material UI6, I used to do it like this: const useStyles = makeStyles((theme) => ({ home: { display: "flex", paddingTop: "8rem", width: ...

When defining functions in Typescript, the new() syntax is used

Can you explain the purpose of the type declaration for dialogComponent in this specific Typescript code snippet? createDialog(dialogComponent: { new(): DialogComponent }) : Promise<ComponentRef<DialogComponent>> { ... } (Referenced from ...

Utilize ngFor within a ng-template to display dynamic content in a table structure

Currently, I am attempting to loop through a list that is obtained from an API request and then populate the data into a table. The issue I am facing is that this table exists within an ng-template tag, and I am unsure of how to manage this situation. Thi ...

How can I use JavaScript to create a function that communicates with a PHP file to dynamically add keys and properties to a JSON file?

Currently employing Discord.JS for the creation of a Discord Bot, I am faced with a command: if(command === "addme") { //code here return message.reply(`Added ${message.author} to Database!`); }; I am looking to incorporate a PHP function from anothe ...

Django: creating a custom dropdown input field for the receiver that is tailored to the sender

I am facing an issue with creating a dropdown list for the receiver without including the sender's id/name. This is different from a chained dropdown which has already been addressed in previous discussions. I believe that using ajax might be the solu ...

Error: Attempting to access an undefined property ('call') on Next.js is causing a TypeError

Exploring the realms of Next.js and Typescript for a new project! My goal is to utilize next.js with typescript and tailwind CSS by simply entering this command: npx create-next-app -e with-tailwindcss my-project Smooth sailing until I hit a snag trying t ...

Executing the ngIf directive in Angular 2 when a function or click event occurs

Is there a way to display an element only when a specific function is executed or a particular click event occurs? Here's the html code snippet I'm currently working with: <sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [map ...

Glistening tabPanel and Analytics by Google

I recently completed a comprehensive tutorial here that delves into the intricacies of Google Analytics. Despite grasping the concepts explained in the tutorial, my understanding of jQuery remains at ground zero. In my ShinyApp, I utilize multiple tabPanel ...

Building a custom Angular 6 pipe for generating a summary of a text snippet

Looking to create a pipe that limits the text box to only show the first 150 characters of the description. If the description is shorter than that, it should display the entire description followed by (...) Currently working on this: export class Tease ...

Passing JavaScript attribute events to alternative handler or type

As I set up a web page for a touch screen computer, I've come across an issue with triggering onclick events due to the size of my fingers causing the cursor to move as I attempt to click. To solve this problem, I am considering forwarding onmousedow ...

Encountering a Firebase error: createUser failed due to missing "password" key in the first argument in AngularJS

Recently, I started learning Angular and decided to follow an online tutorial on creating a chat application. However, I encountered an issue when trying to register with an email and password - the error message "Firebase.createUser failed: First argument ...

Enlarging and cutting video footage

I have developed an app that features a code enabling users to capture photos using their computer-connected camera. How it Works: A webcam is utilized to display a video element with the camera as its source: function onSuccess (stream) { this.video.s ...

Get an angular xml file by utilizing the response from a C# web API download

I am trying to download an XML file from a database using a Web API in C#, which returns the file as byte[]. How can I properly read these bytes and convert them into an XML file on the client side using Angular? Despite attempts with blobs and other metho ...

Alerts cannot be displayed in Javascript before the page is unloaded

Here is the code I have written to ask for confirmation from the user when the page unloads: $(document).ready(function () { var pageLeaveEvent = window.attachEvent || window.addEventListener; var checkedEvent = window.attachEvent ? &a ...

Querying a list of objects with nested pointers using the Parse.com Javascript API

How can I efficiently query my Parse.com backend for a list of objects that contain specific pointers within them? For example, if ObjectA contains a list of pointers to ObjectB, how can I query for all ObjectA's that have ObjectB in their list? I a ...

Creating an element that remains in a fixed position in relation to its parent container, rather than the entire screen - here's how

Encountering an issue where, upon user scrolling down, a portion of the sidebar becomes fixed in position. However, when attempting to apply CSS for fixing the sidebar element, it ends up fixed to the entire screen instead of just within its parent contain ...

Extract additional JSON data from a different key

I've successfully retrieved the maximum and minimum values from a lengthy JSON response, but now I want to also obtain the corresponding dates for those values. The structure of the JSON response is as follows: ?({"channel":{"id":XXXXX,"name":"XXXXXX ...

Determine the accurate data types while transforming an array into an object using a specific key

I have an array of elements, each with a unique category string property. I aim to transform this into a structure where the category serves as the key and the original element is the value. To tackle this, I first verify that I possess a correctly typed ...

Checking the Ajax request with an if statement

$("#Submit").click(function(event){ event.preventDefault(); var th = '<tr><th>' + "Business" +'</th><th>' + "Address"+ '</th><th>'+ "Rating" + '</th><th>' + "Da ...

What could be the reason for the absence of a TypeScript error in this situation?

Why is it that the code below (inside an arbitrary Class) does not show a TypeScript error in VSCode as expected? protected someMethod (someArg?: boolean) { this.doSomething(someArg) } protected doSomething (mustBePassedBoolean: boolean) { /* ... * ...