Develop an Angular 6 application that utilizes an observable to monitor changes in a variable

I am working with Angular 6 and I need to monitor a variable for any changes and then stop or unsubscribe when the variable has a value.

My initial thought was to use an Observable:

myValue; // The variable that needs to be monitored

myObservable = Observable.timer(2000); // Every 2 seconds

myObservable.subscribe(); // Start monitoring

Then, continue checking myValue and once it is not empty,

myObservable.unsubscribe(); // Stop monitoring

This is the basic outline of what I want to achieve...

What would be the best way to implement this?

angulartypescriptrxjsangular6rxjs6

Answer №1

If you are looking to execute a specific action when the value is being assigned, consider using a getter and setter instead of an observable:

private _data: any;
public set data(data: any) {
  this._data = data;
  console.log("Data has been set!");
}
public get data() { return this._data; }

Depending on the nature of the underlying issue, there may be alternative (and potentially more effective) solutions available as well.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Step-by-step guide on utilizing the vendor.ts file available at https://angular.io/docs/ts/latest/guide/webpack.html

As per the guidelines provided at https://angular.io/docs/ts/latest/guide/webpack.html, it is recommended to include vendors like jQuery in the vendor.ts file. // Other vendors for instance jQuery, Lodash or Bootstrap // You can import js, ts, css, sass, ...

angularjsangulartypescript

Tips on resolving handlebars 'module not found' error in typescript while compiling to umd

In my client-side JavaScript library written in TypeScript, I am attempting to incorporate Handlebars. However, when I try to import using import * as Handlebars from 'handlebars', I encounter an error message stating that TypeScript "cannot find ...

typescriptnpmumd

Troubleshooting Issue: Relative Paths Fail to Work with routerLink in Angular 6

I seem to be encountering a problem with the Angular app I'm currently developing. It appears that when using relative paths with routerLink throughout the application, it fails to work properly. There are no errors thrown and the navigation does not ...

angulartypescriptangular-routingangular-router

The json.parse function can be used in JavaScript, but it is not compatible with Angular

Currently, I am in the process of converting an existing JavaScript application into Angular using TypeScript. In the original JavaScript application, I have a JSON data file that is successfully read during startup. However, when attempting to read the ex ...

jsonangulartypescript

The navigation bar is struggling to be positioned on top of the body

I have encountered an issue where I want my navbar to remain on top of all components, but when I open the navigation menu, it pushes all the components of the index page down. My tech stack includes Next.js, Tailwind CSS, and Framer Motion. This problem ...

reactjstypescriptnext.jstailwind-cssframer-motion

Bidirectional data binding in Angular 2 for the class attribute

Utilizing twitter bootstrap tabs, I aim to monitor the application of the active class on the li tag as users switch between different tabs. My objective is to control tab activation through custom buttons by modifying the class attribute to activate direc ...

javascriptjqueryangularjstwitter-bootstrapangular

Error message arising from a change in expression after it has been verified, specifically when using the ngClass directive

I've been attempting to add an active class to my route using a custom logic, but it seems that routerLinkActive is not working due to the dynamic nature of my parent and child routes. Here's the code snippet in question: <ul class="navbar-na ...

angularangular6angular-changedetection

Is there something I'm missing? The action buttons cannot be displayed on a preview of the event

Currently in the process of developing an angular application featuring a calendar component to showcase events, I opted to utilize angular-calendar for the visual representation. While exploring the month view functionality, I encountered an issue where t ...

angulartypescriptangular-calendar

Creating an interactive element in Angular: A step-by-step guide

Hey there, I'm facing a problem with creating a specific payload structure as shown in the example code snippet below. Everything was going well until I got stuck at the dynamic form part, and despite several attempts, I can't seem to figure it o ...

arraysangularangularjstypescriptmultidimensional-array

Revamping elements according to ordered array. Angular version 4.3

Dealing with an array of data that needs to be sorted for displaying in a component seems to be a challenge. Despite having a functional code sample demonstrating the concept, the sorting is not reflected in the Angular app's DOM. The original data i ...

javascriptarraysangulartypescript

Troubleshooting the creation of migration paths in NestJS with TypeORM

After diligently studying the NestJS and TypeORM documentation, I have reached a point where I need to start generating migrations. While the migration itself is creating the correct queries, it is not being generated in the desired location. Currently, m ...

typescriptnestjstypeormnestjs-typeorm

Error: The layout was unable to display the template body

I've been working on a web application with express and eta, but I'm running into an issue with including partials in my templates. Despite trying to include a file partial (refer to the Docs), the compiled template doesn't seem to incorpor ...

node.jstypescriptexpress

Using a Component as a Property in Angular

There is a small gridComponent: @Component({ selector: 'moving-grid', templateUrl: './grid.component.html', styleUrls: ['./grid.component.css'] }) export class GridComponent { @Input('widgets') ext ...

angulartypescriptinputnestedcomponents

AngularJS or Angular 2: Reorganize the JSON data once the 'http' response is received

Updated: [{ "name": "b1", "category": "X1", "amount": 15 }, { "name": "b3", "category": "X1", "amount": 35 }, { "name": "b2", "category": "X1", "amount": 25 }, { "name": "b1", "category": "X2", "amount": 150 }, { "name": "b6" ...

angularjsjsonangular

Displaying Modal from a separate component

CardComponent: export class Card extends Component<Prop, State> { state = { isCancelModalOpen: false, }; marketService = new MarketService(); deleteMarket = () => { this.marketService .deleteMar( ...

javascriptreactjstypescriptreact-props

Why won't my boolean value in the Angular service reflect in the HTML code?

For my project, I am utilizing a stepper and I need to display or hide a div based on the selected product. However, I am encountering an issue where the HTML isn't updating when I try to call the done() function. .service public beneficiary = true; ...

angulartypescript

Retrieve a result from an observable within a function

While attempting to solve what appears to be a simple problem, I'm struggling to find any solutions in my research. The issue arises when trying to subscribe to an Observable within a method and return a value from it. Here is an example of what I h ...

angularrxjsobservable

What is the method for utilizing string interpolation in Angular/Typescript in order to retrieve a value from a variable?

I have a variable called demoVars, which is an array of objects with properties var1, var2, and var3. In my component class, I have a variable named selectedVar that holds the name of one of these properties: var1, var2, or var3. I want to dynamically pu ...

javascriptangularjstypescriptstring-interpolation

Ways to retrieve the property of an object within a view while being sourced from an observable

I am currently working with the following provider code: getWorldCities2() { return this.http.get('../assets/city.list.json') .map(res => res.json()); } Within my TypeScript code, I have implemented the following: ionViewDidLoad() { ...

angulartypescriptionic2observable

Prevent Chrome Extension Pop-up from Resetting when Closed

I am completely new to the world of programming, with a special focus on web development. My current project is rather simple - it's a Chrome extension designed for note-taking purposes. This extension creates a pop-up window when the user clicks on i ...

angulargoogle-chrome-extensionangular-material