Execute a function in Angular 9 whenever a variable undergoes a change in value

Question

Execute a function in Angular 9 whenever a variable undergoes a change in value

There are numerous versions of this question, many containing excessive and irrelevant details. Take into consideration the following scenario in a globals.ts file

interestingString:string = 'blah';

now in a neighboring component neighbor.ts file

displayMsg:string = this.formatInterestingStrs(this.globals.interestingString);

formatInterestingStrs(val:string) {
     return val.substr(0, 21) + "...";
}

and in the HTML...

<div> here's the first 21 characters of something intriguing: {{displayMsg}} </div>

lastly... any other component can change the string at any point in time...

this.globals.interestingString = "I saw Cher in real life today! Man, did she dish on Greg Allman!"

I COULD address this by coding the HTML like so...

<div> here's the first 21 characters of something interesting: {{this.formatInterestingStrs(this.globals.interestingString)}} </div>

...however, this impacts performance. What I would prefer is to be able to "easily" make the globals variable observable or published when modified AND have every instance of it subscribe to the changes and THEN invoke a function to handle any additional alterations that rely on its value. Something equivalent in the globals...

PublishUpdates(interestingString:string = 'blah');

and in the module...

SubscribeToUpdates(this.globals.interestingString).thenDoThis(result){
     this.displayMsg = this.formatInterestingStrs(result);
}

...and I'd like to achieve this without adding excessive bulk or numerous extra lines of code and procedures. Any suggestions?

typescript variables publish-subscribe angular9

Answer 1

Answer №1

After dedicating the entire day to research, I have discovered a solution to your query. The best approach is to utilize multicast observables from RxJS in your Angular application for optimized efficiency.

To implement this, simply add the following code snippet to your globals.ts file...

import { Observable, Subject } from 'rxjs';

  public interestingString:string = 'blah';

  public updateString$ = Observable.create((observer) => {
    observer.next(this.interestingString);
  });

  public interestingString$ = new Subject();

Next, incorporate the following code snippet into as many component .ts files as needed...

ngOnInit(): void {

    this.globals.interestingString$.subscribe((data) => {
      console.log('interestingString$: ' + data);
      //perform desired actions upon change of interestingString
    });
    //...add any additional code here
}

For the final step, whether within this module or another, trigger an event (e.g., click on a button) to simultaneously update all subscribers with the new value...

this.globals.interestingString = "I saw Cher in real life today! Man, did she dish on Greg Allman!";
//updateProfile will automatically .next the current profile
// ...and then will push to all subscribers of profile$
this.globals.updateString$.subscribe(this.globals.interestingString$);

Answer 2

After dedicating the entire day to research, I have discovered a solution to your query. The best approach is to utilize multicast observables from RxJS in your Angular application for optimized efficiency.

To implement this, simply add the following code snippet to your globals.ts file...

import { Observable, Subject } from 'rxjs';

  public interestingString:string = 'blah';

  public updateString$ = Observable.create((observer) => {
    observer.next(this.interestingString);
  });

  public interestingString$ = new Subject();

Next, incorporate the following code snippet into as many component .ts files as needed...

ngOnInit(): void {

    this.globals.interestingString$.subscribe((data) => {
      console.log('interestingString$: ' + data);
      //perform desired actions upon change of interestingString
    });
    //...add any additional code here
}

For the final step, whether within this module or another, trigger an event (e.g., click on a button) to simultaneously update all subscribers with the new value...

this.globals.interestingString = "I saw Cher in real life today! Man, did she dish on Greg Allman!";
//updateProfile will automatically .next the current profile
// ...and then will push to all subscribers of profile$
this.globals.updateString$.subscribe(this.globals.interestingString$);

Execute a function in Angular 9 whenever a variable undergoes a change in value

Answer №1

Similar questions

Alter the button's operation when clicked

Issue TS7053 occurs when trying to access any index of the target of a React.FormEvent<HTMLFormElement>

Tips on utilising the datepicker solely with the calendar icon, avoiding the need for any input fields

Having trouble connecting to remote databases such as Supabase, MongoDB Atlas, or Neon DB using the Prisma ORM

What is the best way to convert this object/array into TypeScript?

A guide on combining [(ngModel)] and innerHTML in an Angular div with the contenteditable attribute

Is there a way to create a universal getter/setter for TypeScript classes?

What is the best approach for defining variables in typescript?

Tips on utilizing JavaScript to retrieve all HTML elements that have text within them, then eliminating the designated element and its descendants

Angular2 encounters an error when processing a custom HTTP request

Slideshow through each item using Typescript and Angular8

Variable Scope is not defined in the TypeScript controller class of an AngularJS directive

Place an image at the top of the canvas at a specific location

Tips on converting Nextjs generated Prisma types case from snake_case to camelCase

Is it possible to specify the timing for executing Typescript decorators?

What is the best way to determine in component.html whether the column type is equal to 1 to show the label text "Active,"

Typescript: utilizing self-referencing static properties in classes

What is preventing TypeScript from identifying the type of a parent based on its child?

What is the proper way to specifically define a new property on the `global` object in TypeScript?

Utilizing an Android .arr file in a Nativescript application