What is the best way to update ngModel with a value from ngrx while ensuring that the ngModel is kept up to date whenever the observable

Question

What is the best way to update ngModel with a value from ngrx while ensuring that the ngModel is kept up to date whenever the observable

Within my application, there is a component called posts-form that receives data from an observable ngrx.

The issue lies in the fact that although the data is visually displayed, it appears to not be recognized as valid when I attempt to access or manipulate the values.

Even after trying to pass values or console log them, they still appear empty due to what seems like ngModel instance/Public variables issues.

angular typescript rxjs ngrx

Answer 1

Answer №1

When you need to pass an Observable to another component, it's best practice to use getters and setters.

Imagine you're passing an Observable called myObservable$ asynchronously to a component:

<dumb-component [myvalue]="myObservable$|async">

Inside the dumb component, there is a member variable called myvalue.

DumbComponent:

class DumbComponent implements OnInit {
  private _myvalue;
  get myvalue() {
    return this._myvalue;
  }
  @Input()
  set myvalue(value) {
    this._myvalue = value;
    if (value) {
      // assuming we expect an array with at least one element
      if (value.length > 0) {
        // manipulate value[0].title or perform other actions
        // because our value is now populated
      }
    }
  }
}

In the example above, the Observable emits three values: 1. undefined 2. [] 3. an array of elements

This example specifically deals with arrays. If you're dealing with a single non-array value, you can omit the second check (if statement). Feel free to add your own checks to ensure the validity of the value passed to the setter method.

Answer 2

When you need to pass an Observable to another component, it's best practice to use getters and setters.

Imagine you're passing an Observable called myObservable$ asynchronously to a component:

<dumb-component [myvalue]="myObservable$|async">

Inside the dumb component, there is a member variable called myvalue.

DumbComponent:

class DumbComponent implements OnInit {
  private _myvalue;
  get myvalue() {
    return this._myvalue;
  }
  @Input()
  set myvalue(value) {
    this._myvalue = value;
    if (value) {
      // assuming we expect an array with at least one element
      if (value.length > 0) {
        // manipulate value[0].title or perform other actions
        // because our value is now populated
      }
    }
  }
}

In the example above, the Observable emits three values: 1. undefined 2. [] 3. an array of elements

This example specifically deals with arrays. If you're dealing with a single non-array value, you can omit the second check (if statement). Feel free to add your own checks to ensure the validity of the value passed to the setter method.

What is the best way to update ngModel with a value from ngrx while ensuring that the ngModel is kept up to date whenever the observable

Answer №1

Similar questions

Concealing the TinyMce Toolbar upon initialization

Explore the item and extract the data within Angular elements

Ensuring File Size and Format Compliance in Angular's HTML and TypeScript

The getStaticProps() method in NextJS does not get invoked when there is a change in

How to pull data from an HTTP source without relying on promises

How Angular 2 Parent Component Can Invoke Methods of Multiple Child Components

I would like to customize the Primeng switch by changing the values from boolean to 'N' or 'Y'

Encountering a [object Object] error at the AppComponent_Host ngfactory js file while working on an Angular 8

Differentiating body classes in Angular 5

Type guard does not narrow down the union type

Serve PDFs in JSON using Spring Boot and Angular 2

How to ensure attribute/property wrapping within max line length in Visual Studio Code for code formatting

Resetting Values in an Angular Reactive FormArray

angular Delayed arrival of @input value within constructor

NPM IP library susceptible to Server-Side Request Forgery (SSRF) vulnerabilities

Is it possible to create a return type structure in TypeScript that is determined by the function's argument?

Angular displays incorrect HTTP error response status as 0 instead of the actual status code

Having trouble customizing the HTML range input?

Issue with HTTP interceptor failing to activate

When setting up an Angular reactive form, the `touched` property of a member may not be accessible