Using strings as variable names in Angular 2+ and Typescript can be a powerful tool for creating

Question

Using strings as variable names in Angular 2+ and Typescript can be a powerful tool for creating

In traditional JavaScript, we can assign a property to the global window object using a string as the name, like so:

const str = "myVar";
window[str] = "Value";
console.log(myVar);

However, is there a way to achieve the same functionality in Angular 2/4 and Typescript? While we can store variables in components using this.myVar, can we create a variable with a string as its name? For example:

const str = "myVar";
this[str] = "Value";
// the result should be similar to this.myVar = "Value";

https://i.sstatic.net/dXycF.png

https://i.sstatic.net/r1Mqx.png

angular typescript

Answer 1

Answer №1

If you want to allow dynamic properties on your class, you can do so like this:

class Example {
  [key: string]: any;

  constructor() {
    const str = "myProperty";
    this[str] = "Dynamic Value";
    console.log(this.myProperty);
  }
}

Just keep in mind that by enabling dynamic properties, you are sacrificing typechecking:

class Test {

  [key: string]: any;

  constructor() {
    this.tet(); // causing a typo and resulting in a runtime error
  }

  test() {

  }
}

Answer 2

If you want to allow dynamic properties on your class, you can do so like this:

class Example {
  [key: string]: any;

  constructor() {
    const str = "myProperty";
    this[str] = "Dynamic Value";
    console.log(this.myProperty);
  }
}

Just keep in mind that by enabling dynamic properties, you are sacrificing typechecking:

class Test {

  [key: string]: any;

  constructor() {
    this.tet(); // causing a typo and resulting in a runtime error
  }

  test() {

  }
}

Answer 3

Answer №2

I believe there is a way to gain access by utilizing the following method, and Typescript acknowledges this format

this["myVariable"]

in place of

this.myVariable

Answer 4

I believe there is a way to gain access by utilizing the following method, and Typescript acknowledges this format

this["myVariable"]

in place of

this.myVariable

Using strings as variable names in Angular 2+ and Typescript can be a powerful tool for creating

Answer №1

Answer №2

Similar questions

How to apply animation in Angular 2 to a single element within an *ngFor loop

Displaying form errors in Ionic 3 when values do not match the specified regular expression

The Angular parent component is able to detect changes in the ng-content child component

Best practices for working with Angular: How to handle nested subscribe calls effectively?

Combining nested Observables within an outer array without using inner subscribe (RxJS)

change in the value of a nested formArray within a parent formArray

Angular Router is unable to recognize the provided URL

Angular input field with the ability to add and remove multiple options

Advanced Typescript contains a parameter that specifies the type of callback function

Struggling to integrate a JavaScript sdk with an Angular2 application due to missing dependencies

Using routing with modules instead of components in Angular 10+ involves configuring the routing paths within the module files

How can we transform a Forkjoin into an iterative process?

Angular Dependency Injection: Individual instances of each service are provided for every module usage

The presence of an Angular pipe is causing interference with the execution of a template

Is there a substitute for $sce in Angular 7?

Utilizing the outcome of the initial promise in subsequent promises within a Promise.all operation

Encountering a Tslint error while utilizing createBrowserHistory() function imported from @types/history

Error occurs in Azure Function Linux Nodejs when trying to use @azure/storage-blob as it cannot read the property 'startsWith' of undefined

Issue with Nativescript Angular router version 3.0.0-alpha.7 causing navigation errors

What is the syntax for implementing React.forwardRef in a dynamic Anchor or Button component?