How to declare Global values in Angular project and use it through the lifecycle of project

Question

I have a nested Object which will contain information like userId, token, name, email, phone, company name etc till the user logouts. I need to use certain values of the object when calling an API.

Is there a way to globally set and get the values of the object in each of my component. Currently what I have done is I have setter and getter and I set and get the values individually but it's very time consuming and since I get the values seperately I have to form the Object again in each of the component. Current approach :

Create a service class and create two functions.

setEmailData(info) {
this.info = info;
}

getEmailData() {
const temp = this.info;
//  this.clearData();
return temp;
}

I do this for atleast 10 values. Is there a way I can create and set and fetch the values of an object directly? My actual object looks something like this

userData = {
    border: {
      border: '',
      visible: true
    },
    header: {
      title: '',
      visible: true
    },
    isLoggedIn: false,
    uid: '',
    uid_loader: false,
    user: {
      UserID: '',
      company: 'dev',
      emaild: '',
      lastname: '',
      name: '',
      phone: '',
      token: '',
      url: ''
    }
  };

Jamie Vangeysel · Accepted Answer · 2021-08-12 12:02:23Z

2

Just create a global service.

ng g service userService

In your service add a private variable

private userdata: IUserData | undefined

add a public get and set

public get Userdata(): IUserData | undefined {
    return this.userdata
}

public set Userdata(value: IUserData) {
    this.userdata = value
}

Then add the service into your components in the constructor.

And declare the interface

export interface IUserdata {
  border: {
    border: string,
    visible: boolean
  },
  header: {
    title: string,
    visible: boolean
  },
  isLoggedIn: boolean,
  uid: string,
  uid_loader: boolean,
  user: {
    UserID: string,
    company: string,
    emaild: string,
    lastname: string,
    name: string,
    phone: string,
    token: string,
    url: string
  }
}

edited Aug 12, 2021 at 12:02

answered Aug 12, 2021 at 11:53

Jamie Vangeysel

1218 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Raspberry Lemon Over a year ago

What is IUserData in private userdata: IUserData | undefined?

Beka Kalandadze Over a year ago

It is an interface in which you declare object structure you have for the user.

Jamie Vangeysel Over a year ago

This is just the name of the interface which defines your datatype, using typescript gives you the ability to declare types. I added the definition to my answer so it correlates to your object.

Raspberry Lemon Over a year ago

oh..okay thanks @JamieVangeysel. I suppose I can just loop through the object and set and get the values right ?

vaibhav saxena · Accepted Answer · 2021-08-12 12:55:29Z

0

One option is Reactive Form. Create the form schema from your User Object in the Oninit hookup.

Once you create the object, then you can easily set and read the values of the form object.

answered Aug 12, 2021 at 12:55

vaibhav saxena

12 bronze badges

Collectives™ on Stack Overflow

How to declare Global values in Angular project and use it through the lifecycle of project

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related