Is it possible to utilize a component's property as an argument for a method in Angular 6?

Question

Is it possible to utilize a component's property as an argument for a method in Angular 6?

Within my Angular 6 application, I have a method designed to alter a property of my component. The scenario is as follows:

...
value: number = 10;
changeValue(v) { return v = 100; }
...

Upon invoking this method with the component's property:

this.changeValue(this.value); // the value remains unchanged

I anticipate that this.value should now be 100, but it stubbornly remains at 10. While I am able to access the value of the v parameter (which corresponds to this.value in this case), any attempts to modify it within the function are unsuccessful.

Where exactly am I going wrong and how can I achieve the desired functionality? Would you kindly provide guidance on addressing this issue? Any assistance would be greatly appreciated.

angular typescript

Answer 1

Answer №1

In Typescript, primitives like strings, numbers, and booleans are passed by value. This means that you can take certain actions to work with them.

One option is to assign the result of a method to a variable called value:

changeValue(){
   return 100;
}

this.value = this.changeValue();

Alternatively, you can directly change the value within the method itself:

changeValue(){
   this.value = 100;
}

this.changeValue();

LATEST UPDATE

In response to a comment from Jeto, it was noted that even when passing an object as an argument instead of a primitive, the outcome remains the same because you are modifying the object itself rather than its properties.

value = {foo: 'bar'}

changeValue(v){
    return v = {foo: 'baz'};
}

console.log(this.value); // {foo: 'bar'}
this.changeValue(this.value);
console.log(this.value); // {foo: 'bar'}  #No Change

However, if your goal is to alter a specific property of an object, you can achieve this by changing the property value:

value = {foo: 'bar'}

changeValue(v){
    v.foo = 'baz'
}

console.log(this.value); // {foo: 'bar'}
this.changeValue(this.value);
console.log(this.value); // {foo: 'baz'}  #Modified

Answer 2

In Typescript, primitives like strings, numbers, and booleans are passed by value. This means that you can take certain actions to work with them.

One option is to assign the result of a method to a variable called value:

changeValue(){
   return 100;
}

this.value = this.changeValue();

Alternatively, you can directly change the value within the method itself:

changeValue(){
   this.value = 100;
}

this.changeValue();

LATEST UPDATE

In response to a comment from Jeto, it was noted that even when passing an object as an argument instead of a primitive, the outcome remains the same because you are modifying the object itself rather than its properties.

value = {foo: 'bar'}

changeValue(v){
    return v = {foo: 'baz'};
}

console.log(this.value); // {foo: 'bar'}
this.changeValue(this.value);
console.log(this.value); // {foo: 'bar'}  #No Change

However, if your goal is to alter a specific property of an object, you can achieve this by changing the property value:

value = {foo: 'bar'}

changeValue(v){
    v.foo = 'baz'
}

console.log(this.value); // {foo: 'bar'}
this.changeValue(this.value);
console.log(this.value); // {foo: 'baz'}  #Modified

Is it possible to utilize a component's property as an argument for a method in Angular 6?

Answer №1

Similar questions

Whenever the [required] tag switches from being true to false, it generates an event

What steps can I take to address the problem in iOS 17 where sound is coming from the earpiece instead of the speaker during camera activation?

Using ES6, one can filter an array of objects based on another array of values

Incorporating XMLHttpRequest in my React Typescript App to trigger a Mailchimp API call, allowing users to easily sign up for the newsletter

Can a new record be created by adding keys and values to an existing record type while also changing the key names?

TypeScript is unable to recognize files with the extension *.vue

Leveraging event listeners in conjunction with React's useEffect function

Issue with ngSubmit not triggering in child component that employs ControlValueAccessor while utilizing [formGroup]

Tips for creating a versatile function in TypeScript that accepts either a single value or an array of values for two parameters

Create a TypeScript view component that encapsulates an HTMLElement for seamless integration with TweenMax

Having trouble correctly inputting the HOC function that accepts a custom property key

Typescript combineReducers with no overload

Ways to implement debounce in handling onChange events for input fields in React

Is there a way to execute Angular code synchronously similar to how it is done in C#?

Clicking the button will trigger the onclick event

Unable to choose Typescript as a programming language on the VSCode platform

Tips for maintaining an open ng-multiselect-dropdown at all times

Spring MVC seems to be ignoring the static resources specified in the HTML files

Tips on displaying the entire text when hovering over it

Trouble with displaying class object array in Angular 5 using ngFor loop