Dynamic Key Value Assignment in Angular 4 / Typescript

Question

I am trying to build an object with keys that are defined in an environment file, so the keys will change based on the environment.

import { environment } from '../environments/environment'

export abstract class AbstractAPIService {
    fieldValues[environment.stateDropdownID] = ['Al', 'AK', 'CT', ....]
}

However, the compiler is giving the following error: '=' expected.

Is it possible to do something like this in Angular 4 or TypeScript in general?

Thanks!

I think you just can't do this in the class properties portion, but it looks to be possible in the constructor. See if this works for you. — Alexander Staroselsky
– Alexander Staroselsky, Commented Aug 10, 2017 at 20:46
That is pretty much just what I was looking for. If you want to post that example as an answer I will accept. — Mac
– Mac, Commented Aug 10, 2017 at 20:51

Alexander Staroselsky · Accepted Answer · 2017-08-10 20:55:10Z

3

You will not be able to perform this dynamic key assignment in the Parameter properties of the class, you would however be able to achieve this in the constructor or methods of the class. It would work like this:

import { environment } from '../environments/environment'

export abstract class AbstractAPIService {
    fieldValues: object = {};

    constructor() {
        this.fieldValues[environment.stateDropdownID] = ['Al', 'AK', 'CT', ....];
    }
}

Here is a plunker demonstrating the functionality in a simple Angular sample application.

Hopefully that helps!

answered Aug 10, 2017 at 20:55

Alexander Staroselsky

39k16 gold badges83 silver badges98 bronze badges

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

Comments

LLL · Accepted Answer · 2017-08-10 20:25:40Z

1

Angular runs in the browser, so there isn't really an environment, however you could insert your env variables in config files when you build the app like in this answer or have different values based on if it's dev or prod stage of the app by using isDevMode API

answered Aug 10, 2017 at 20:25

LLL

3,7812 gold badges28 silver badges46 bronze badges

1 Comment

Mac Over a year ago

Providing the environment does seem like a better approach than importing in each component. However, I am still not sure how to add key/value pairs to an object if the key is a variable

John Montgomery · Accepted Answer · 2017-08-10 21:26:19Z

1

I'd recommend doing this in the constructor as Alexander suggested, but it actually is possible to assign it directly if you really want to:

import { environment } from '../environments/environment'

export abstract class AbstractAPIService {
    fieldValues = {
        [environment.stateDropdownID]: ['Al', 'AK', 'CT', ....]
    }
}

answered Aug 10, 2017 at 21:26

John Montgomery

7,10610 gold badges58 silver badges73 bronze badges

Collectives™ on Stack Overflow

Dynamic Key Value Assignment in Angular 4 / Typescript

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related