I am working with a class that includes the following properties:
export class Model {
public id: number;
public name: string;
}
Is there a way to make this class observable, so that changes in its properties can be listened to?
I'm hoping for something similar to this:
let m = new Model();
m.id = 10;
To listen for changes:
m.pipe(map() => m.id);
Check out this straightforward illustration.
https://example.com/plain-sample
import { Component, OnInit, VERSION } from '@angular/core';
import {BehaviorSubject} from 'rxjs';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
model: Model;
ngOnInit() {
this.model.id$.subscribe(newId => {
// implement a specific action here.
});
}
}
export class Model {
// @ts-ignore
private readonly _id = new BehaviorSubject<number>();
readonly id$ = this._id.asObservable();
// @ts-ignore
private readonly _name = new BehaviorSubject<string>();
readonly name$ = this._name.asObservable();
get id(): number {
return this._id.getValue();
}
set id(val) {
this._id.next(val);
}
get name(): number {
return this._name.getValue();
}
set name(val) {
this._name.next(val);
}
}
To enhance the functionality of this code, I suggest incorporating it into the constructor. Avoid declaring subjects within the class as they can be challenging to manage automatically.
Instead of injecting subjects directly, consider using a callback for a simpler alternative.
In the example test class provided below, each property allows for a callback to be injected. The respective callback is triggered in the property setters when the value changes.
export class MyClass {
private _id: number;
private _name: string;
constructor(private callback?: {
id?: () => void,
name?: () => void
}) {}
get id(): number {
return this._id;
}
set id(value: number) {
if (value === this._id) {
return;
}
this._id = value;
if (this.callback && this.callback.id) {
this.callback.id();
}
}
get name(): string {
return this._name;
}
set name(value: string) {
if (value === this._name) {
return;
}
this._name = value;
if (this.callback && this.callback.name) {
this.callback.name();
}
}
}
Using this code from elsewhere is straightforward.
myClass: MyClass = new MyClass({
id: () => this.onIdChange()
});
ngOnInit() {
this.myClass.id = 10;
this.myClass.name = 'Default';
}
private onIdChange() {
console.log(`id changed to ${this.myClass.id}`);
}
If desired, you could modify this to utilize subjects. In that case, the calling code would need to handle cleaning up the subjects appropriately.
Incorporate getters and setters for the attributes of your class, implement emitters within it, and then link listeners externally to respond when those emitters are triggered
Initializing a new model instance with id set to 10:
let model = new Model();
model.id = 10;
Creating an observable of the model instance:
const model$ = of(model);
Mapping over the observable to extract the id property:
model$.pipe(map()=> model.id);
I am looking to change the time zone of a date from one timezone to another. For example: "Sun May 01 2019 00:00:00 GMT+0530 (India Standard Time)" is the current date object. I want to convert this date based on a specific timeZone offset, let's say ...
I'm having trouble getting vertical scroll to work with my material table in React Typescript. Horizontal scroll is functioning properly for large data, but I'm stuck on implementing the vertical scroll. Here's my code: {isLoading ? ...
I am currently using node version 10.14.1 and npm version 6.4.1 with angular version 7.0.3 installed. However, when I try to check the angular version by running the ng --version command, I encounter an error message in the command prompt. C:\Users&b ...
Here's an issue I'm facing: I've been attempting to integrate SSO and OAuth2 flow using angular-oauth2-oidc. When testing with POSTMAN and ThunderClient in VS Code, I managed to receive the correct response (the access_token). However, I am ...
I've been experimenting with creating nested reactive form components. Specifically, I'm working on a reusable input component for my app within a reactive form. How can I dynamically communicate with nested components in Reactive forms? Despite ...
I am currently developing a backend application that collects data from GraphQL endpoints using ApolloClient: const client = new ApolloClient({ uri: uri, link: new HttpLink({ uri: uri, fetch }), cache: new InMemoryCache({ addTypename: f ...
My technology stack includes Django for the backend with Django Rest Framework and Angular for the frontend. Within the backend, I have defined 2 models: class Post(models.Model): category = models.ForeignKey(Category, on_delete=models.SET_NULL, null= ...
I'm looking to incorporate Typescript into my Ubuntu system and have come across two different methods to do so: Using sudo apt update && sudo apt install node-typescript -y Running sudo npm install -g typescript My main question revolves ar ...
Having trouble getting django to accept my POST request for an access token. Despite having the correct parameters and authorization code, I keep receiving an error after sending the follow-up POST request. According to what I've read, the content-ty ...
Is there a way to implement the function below without utilizing any? Playground type MyType = { name: string, age: number, score: { prime: number, }, prize: { first: { discount: number } } } export const trim = ( myObj: ...
I am currently working on setting up a node server using Typescript with the help of express and express-ws. My goal is to include Sessions in my application, so I have implemented express-session. Below you can find some pseudo code: import * as session ...
Having trouble with including a specific library in my component Here is the code for my component which uses geolib as the library: import { Component, OnInit } from '@angular/core'; import { StationsService } from '../../../services/stati ...
The outline color of the title in the input textbox appears differently in Google Chrome, and the bottom border line looks different as well. <input type="text" title="Please fill out this field."> https://i.stack.imgur.com/iJwPp.png To address th ...
Encountered a similar unresolved query in another question thread: Absolute module path resolution in TypeScript files in Visual Studio Code. Facing the same issue with "typescript": "^4.5.5". Here is the content of my tsconfig.json: { ...
Currently, I am in the process of developing an Angular 8 application. In this app, when a user clicks on a button, they should be redirected to a vendor portal that is hosted on a different web application with a different URL. When the user lands on the ...
Encountering an issue while attempting to update an object with additional information, receiving an error message stating 'property \'push\' of undefined'. /*Below is the object model in question:*/ export class Students { ...
I am currently working on a project where I have multiple buttons that need to toggle an active class when selected in order to change their color. Below is a snippet of what I have: In the array called 'selected', I have: this.selected = [&ap ...
Hey there, I'm just starting to learn about TypeScript and I have a question about how sessions are handled in Typescript. Could someone please explain the process of session initialization, storing user data in sessions, etc.? If you have any tutoria ...
I'm currently working on an Angular project that utilizes ng2-charts and chart.js. Interestingly, when I run the project locally, the datalabels are visible (check: project run locally). However, once I deploy the project onto a server, the datalabels ...
I'm relatively new to using rxjs in my angular projects and I'm facing a challenge with a simple scenario. When making an http call to retrieve a group, it returns data including a list of "buddy ids", "genre ids", and a "region id". In order t ...