What is the best approach to ensure that the variables within a function of an imported component in Angular 8 reflect their current values instead of their initial values?

Question

What is the best approach to ensure that the variables within a function of an imported component in Angular 8 reflect their current values instead of their initial values?

Within the constructor of a component, I am declaring a private variable for an imported component. For example:

constructor(private x: Xcomponent){}

Afterwards, I am calling a function, scanx(), that is declared inside Xcomponent.

x.scanx()

Within the scanx() function, there is a variable named ShouldChange whose initial value is null. Prior to calling scanx(), its value is changed by a different function inside Xcomponent to {'some':'something'}. However, when scanx() is called from another component, the value of ShouldChange is null. I have tried to access the values of variables declared and changed in classes (not components) and I retrieve the current values, not the initial ones as it's happening when I try to access the values of imported components.

I am using Visual Studio Code IDE. The language being used is TypeScript.

import { Xcomponent } from '../Xcomponent/xcomponent.component';
import { Globals } from '../globals';

export class parentComponent implements OnInit {
    constructor(private x: Xcomponent, private global: Globals) {
    }

    runThisFunction() {
        x.scanx(global.theVariableRetainsEditedValue); // The variable in the global instance retains the changed values.
    }
}

// Inside the scanx function of Xcomponent
export class Xcomponent implements OnInit {
    ShouldChange = null;

    someotherFunction() {
        this.ShouldChange = {'some': 'somethingelse'}
    }

    ngOnInit() {
this.someotherFunction();
this.confirmTheChange();
    }

    confirmTheChange() {
        if (this.ShouldChange === null) {
            alert("This never happens");
        }
        else {
            alert("THE VALUE WAS INDEED CHANGED");
        }
    }

    scanx(SomeInput) {
        if (this.ShouldChange === null) {
            alert("This Should not happen");
        } else {
            alert("This is not happening. Why?");
        }
    }
}

I expected the value of the variable ShouldChange to not be null since it's changed in ngOninit. But it reflects its initial value when called from an imported instance of the component. However, checking the variable's value from the unimported instance of the component shows that the value has indeed changed as shown in the confirmTheChange() function.

angular typescript

Answer 1

Answer №1

It seems like the issue could be that the function is not returning the new value, resulting in the unchanged value...

To ensure the new value is returned, add return y at the end of the function that modified the y value:

scanx(){
*// code that updates the y value*
return y
}

In the component where you call 'scanx', make sure to assign the returned value to a variable:

runThisFunction() {
 const y = x.scanx(global.theVariableRetainsEditedValue); // The global variable retains the updated value.
*y will now hold the updated value*
}

If the issue persists, consider using observables as a solution. You can create an observable in a service to act as a data intermediary between components, with RxJS BehaviorSubject being a viable option.

Step one - Create a new service with a BehaviorSubject and a method to update the observable value:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class ValueChangerService {
  private initialValue = new BehaviorSubject(0);
  currentValue = this.initialValue.asObservable();

  constructor() { }

  changeValue(value: number) {
    this.initialValue.next(value);
  }
}

Step Two - Inject the service into your components and update the value in one component:

import { Component, OnInit } from '@angular/core';
import { ValueChangerService } from './value-changer.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private valueChanger: ValueChangerService) {
  }

  setValue(value) {
    this.valueChanger.changeValue(value);
  }
}

Step Three - Subscribe to the observable in the other component:

import { Component, OnInit } from '@angular/core';
import { ValueChangerService } from "./value-changer.service";

@Component({
  selector: 'hello',
  template: `
   Hello Component
   the value of y is {{y}}
  `,
  styleUrls: ['./app.component.css']
})
export class HelloComponent implements OnInit {

  y: number;

  constructor(private valueChanger: ValueChangerService) { }
  ngOnInit() {
    this.valueChanger.currentValue.subscribe(value => this.y = value);
  }
}

You can access the complete code here: https://stackblitz.com/edit/angular-gvh6xj

Also, check out by Jeff Delaney!

Answer 2

It seems like the issue could be that the function is not returning the new value, resulting in the unchanged value...

To ensure the new value is returned, add return y at the end of the function that modified the y value:

scanx(){
*// code that updates the y value*
return y
}

In the component where you call 'scanx', make sure to assign the returned value to a variable:

runThisFunction() {
 const y = x.scanx(global.theVariableRetainsEditedValue); // The global variable retains the updated value.
*y will now hold the updated value*
}

If the issue persists, consider using observables as a solution. You can create an observable in a service to act as a data intermediary between components, with RxJS BehaviorSubject being a viable option.

Step one - Create a new service with a BehaviorSubject and a method to update the observable value:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class ValueChangerService {
  private initialValue = new BehaviorSubject(0);
  currentValue = this.initialValue.asObservable();

  constructor() { }

  changeValue(value: number) {
    this.initialValue.next(value);
  }
}

Step Two - Inject the service into your components and update the value in one component:

import { Component, OnInit } from '@angular/core';
import { ValueChangerService } from './value-changer.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private valueChanger: ValueChangerService) {
  }

  setValue(value) {
    this.valueChanger.changeValue(value);
  }
}

Step Three - Subscribe to the observable in the other component:

import { Component, OnInit } from '@angular/core';
import { ValueChangerService } from "./value-changer.service";

@Component({
  selector: 'hello',
  template: `
   Hello Component
   the value of y is {{y}}
  `,
  styleUrls: ['./app.component.css']
})
export class HelloComponent implements OnInit {

  y: number;

  constructor(private valueChanger: ValueChangerService) { }
  ngOnInit() {
    this.valueChanger.currentValue.subscribe(value => this.y = value);
  }
}

You can access the complete code here: https://stackblitz.com/edit/angular-gvh6xj

Also, check out by Jeff Delaney!

Answer 3

Answer №2

Click here for a live demonstration

Component X

 import { Component, OnInit } from '@angular/core';
    import {TestService} from "./test.service"

    @Component( {
      selector: 'x-child',
      template: ``,
    })
    export class XchildComponent implements OnInit {

      constructor(private valueChanger: TestService) { 

         this.valueChanger.currentValue.subscribe(value =>  
         this.ShouldChange = value
            )
      }

      ShouldChange = null;

        someotherFunction() {
          //  this.ShouldChange = {'some': 'somethingelse'}

             this.valueChanger.changeValue({'some': 'somethingelse'});
        }

        ngOnInit() {

          this.someotherFunction();
          this.confirmTheChange();
        }

        confirmTheChange() {
            if (this.ShouldChange === null) {
                alert("This scenario will not occur");
            }
            else {
                alert("THE VALUE HAS BEEN SUCCESSFULLY CHANGED");
            }
        }

        scanx(value: any) {
            if (this.ShouldChange === null) {
                alert("This should not be happening");
            } else {
                alert("Why is this not taking place?");
            }
        }
    }

Parent component

import { XchildComponent } from './x-child.component'
import { Component , ViewChild, AfterViewInit} from "@angular/core";

@Component( {
  selector: 'parent',
  template: ``,

})
export class ParentComponent implements AfterViewInit {
constructor(public child: XchildComponent) {

}


ngAfterViewInit() {

this.child.scanx('checking new value')
}


}

Hoping that this solution resolves your issue

Answer 4

Click here for a live demonstration

Component X

 import { Component, OnInit } from '@angular/core';
    import {TestService} from "./test.service"

    @Component( {
      selector: 'x-child',
      template: ``,
    })
    export class XchildComponent implements OnInit {

      constructor(private valueChanger: TestService) { 

         this.valueChanger.currentValue.subscribe(value =>  
         this.ShouldChange = value
            )
      }

      ShouldChange = null;

        someotherFunction() {
          //  this.ShouldChange = {'some': 'somethingelse'}

             this.valueChanger.changeValue({'some': 'somethingelse'});
        }

        ngOnInit() {

          this.someotherFunction();
          this.confirmTheChange();
        }

        confirmTheChange() {
            if (this.ShouldChange === null) {
                alert("This scenario will not occur");
            }
            else {
                alert("THE VALUE HAS BEEN SUCCESSFULLY CHANGED");
            }
        }

        scanx(value: any) {
            if (this.ShouldChange === null) {
                alert("This should not be happening");
            } else {
                alert("Why is this not taking place?");
            }
        }
    }

Parent component

import { XchildComponent } from './x-child.component'
import { Component , ViewChild, AfterViewInit} from "@angular/core";

@Component( {
  selector: 'parent',
  template: ``,

})
export class ParentComponent implements AfterViewInit {
constructor(public child: XchildComponent) {

}


ngAfterViewInit() {

this.child.scanx('checking new value')
}


}

Hoping that this solution resolves your issue

What is the best approach to ensure that the variables within a function of an imported component in Angular 8 reflect their current values instead of their initial values?

Answer №1

Answer №2

Similar questions

What is the process for accessing my PayPal Sandbox account?

What is the correct method for service injection in Angular 8?

The error message "core.js:10101 NG0303: Unable to link to 'matCellDefOf' because it is not a recognized property of 'td'" was displayed on the console

Implementing global user authentication state with Zustand in Next.js version 13.4.9

Pressing the tab key while using Angular will halt any additional processes from running

Explore a vast array of items in a collection

create parameters for the angular properties of chemical functions

Using the rxjs repeatWhen operator within the http request pipeline to automatically resend the request if the expected response is not received

Error: Unable to parse string in URI within vscode API

Testing the timeout of Angular Karma tests while evaluating the AppComponent with the CUSTOM_ELEMENTS_SCHEMA

Unable to locate module 'fs'

Using Angular in conjunction with a chrome extension that includes a content script

While utilizing Typescript, it is unable to identify changes made to a property by a

Is Angular's forkJoin being phased out?

Use Advanced Encryption Standard Algorithm (AES) to encrypt text with TypeScript and decrypt it using C# for enhanced security measures

Combine a constant interface with a generic function to create a unique generic interface

issue with lazy loading Angular module containing a preview component

Can the NGXS store be shared between independent Angular (sub)projects?

Unexpectedly, optimization causing issues on Angular site without explanation

Extending a class with diverse types in Typescript: A guide