Passing variables by reference in typescript [Angular 8]

Question

I have a several variables on the html of the component which are given their values by the typescript file. It is declared in html as follows:

<h1>{{myproperty1}}<\h1>
<h1>{{myproperty2}}<\h1>
<h1>{{myproperty3}}<\h1>

In the typescript file they are declared in the global scope as follows:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
 
})
export class AppComponent implements OnInit {
  myproperty1:string;
  myproperty2:string;
  myproperty3:string;
}

Now these values can be updated using this in a function in the ts file. For example if I wanted to set myproperty1 to something I would do it as follows:

 
})
export class AppComponent implements OnInit {
       myproperty1:string;
       myproperty2:string;
       myproperty3:string;

myfunction(){
       this.myproperty1 = "Hello world";
}

setInterval(()=>{myfunction();},2000);

The problem with this approach is that I lose generality. The function becomes valid for only ONE variable. This is displeasing. The problem scales up much more when the code for the function is longer. I need a function where I can pass in the value by reference. For example instead of executing the function for each property, I instead pass in that specific variable.

Now I understand that in javascript and by extension typescript primitive variables are passed by value and I need to pass an object, however this also does not help. Let's say I create the following object:

let myobject = {
        this.property1:"Lorem",
        this.property2:"Lorem",
        this.property3:"Ipsum",
}

Now when I execute the function, I need to pass in the specific key other it does not change the string. For this above object I write the following function and call it:

func(obj){
obj.property1 = "Hello world";
}
func(myobject);

Here if I do not declare property1 it does not modify that entry, instead it appends a new key value pair on the dictionary.

Another method I came across here mentioned using the window to do this as follows:

var a = 1;
inc = function(variableName) {
  window[variableName] += 1;
};

inc('a');

alert(a); // 2

However in angular it gives the following error:

Error: src/app/app.component.ts:86:7 - error TS2322: Type 'string' is not assignable to type 'Window'.

What I want is really just a method of passing in a value by reference which can then be rendered on the html correctly.

Answer 1

You have the option to declare a parameter that is of type of the properties of the respective component (or the properties you want to be valid).

Then you can use the index type to access the property.

Something like this:

type props = 'prop1' | 'prop2';

export class MyComponent {
  prop1: string = '';
  prop2: string = '';
  prop3: number = 0;  // can't be passed to updateProp because not assigned to type props

  updateProp(p: props) {
    this[p] = 'Updated!';
  }
}

EDIT:
Example: https://stackblitz.com/edit/angular-nhjsec?file=src/app/app.component.html

Answer 2

The way to go about doing this is by using an object and using that object for the interpolation of the value on the html page. Now say you want to update some values on the html. You assign them as follows:

app.component.html

<h1>{{object.property1}}<\h1>
<h1>{{object.property2}}<\h1>
<h1>{{object.property3}}<\h1>

Now in the ts file we declare them as follows:

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
 
})
export class AppComponent implements OnInit {
  object = {
        property1: 'somestring',
        property2: 'somestring',
        property3: 'someotherstring'
        }

}

Now the whole point of declaring them in this way to not lose generality. In this way instead of creating a separate function for each property, you get to pass in that property by reference and it's changed value is also updated on the html page. In order to elaborate my point, say I write one function which will take a string and set a specific property to this new value and we want to be able to use the same function for each property. We do so using this object as follows:

app.component.ts

export class AppComponent implements OnInit {
  object = {
        property1: 'somestring',
        property2: 'somestring',
        property3: 'someotherstring'
        }
  modifydata(x:string,value:string){
       this.object[value] = x;
        }


    //call the function

  setInterval(()=> {
        var mystring = 'property1';
        this.modifydata('hello world',mystring);},2000);


}

RESULT: We have successfully generalized the function to be used for any given property without having to hardcode any values.