Is it feasible to invoke a method without any arguments on this basic subscription?

Question

Is it feasible to invoke a method without any arguments on this basic subscription?

A BRIEF SUMMARY

Implementing an observable in my code, I strive for maintaining cleanliness and efficiency by utilizing the detectChanges() method to update *ngIf= in the HTML.

QUERY

Is there a way to invoke the detectChanges() method within subscribe() function as demonstrated in the following example?

Demonstration (does not work due to overload):

this.subscriptions.add(
  this._hotelEffect
    .getHotel()
    .pipe(map(this.createHotel))
    .subscribe(this._changes.detectChanges)
);

My current workaround:

this.subscriptions.add(
  this._hotelEffect
    .getHotel()
    .pipe(
      map((resp) => {
        this.createHotel(resp);
        this._changes.detectChanges();
      })
    )
    .subscribe()
);

angular typescript rxjs

Answer 1

Answer №1

So, is that what you're trying to achieve?

this.subscriptions.add(
  this._hotelEffect
    .getHotel()
    .pipe(map(this.createHotel.bind(this)))
    .subscribe(()=>this._changes.detectChanges())
);

Assuming that this.createHotel can handle the return type of getHotel()

I want to keep my code clean and simple. I need to make a function call.

If this is indeed the case, here's how I would do it:

this._hotelEffect
    .getHotel()
    .subscribe((resp) => {
        this.createHotel(resp);
        this._changes.detectChanges();
      });

Furthermore, since you mentioned managing subscriptions for component destruction, there's a more efficient way using the takeUntil operator

//field 
private onDestroy=new Subject();
ngOnDestroy(){ onDestroy.next();onDestroy.complete()}
   
//and then with ANY observable in the component
this._hotelEffect
    .getHotel()
    .pipe(takeUntil(this.onDestroy))
    .subscribe((resp) => {
        this.createHotel(resp);
        this._changes.detectChanges();
      });

Answer 2

So, is that what you're trying to achieve?

this.subscriptions.add(
  this._hotelEffect
    .getHotel()
    .pipe(map(this.createHotel.bind(this)))
    .subscribe(()=>this._changes.detectChanges())
);

Assuming that this.createHotel can handle the return type of getHotel()

I want to keep my code clean and simple. I need to make a function call.

If this is indeed the case, here's how I would do it:

this._hotelEffect
    .getHotel()
    .subscribe((resp) => {
        this.createHotel(resp);
        this._changes.detectChanges();
      });

Furthermore, since you mentioned managing subscriptions for component destruction, there's a more efficient way using the takeUntil operator

//field 
private onDestroy=new Subject();
ngOnDestroy(){ onDestroy.next();onDestroy.complete()}
   
//and then with ANY observable in the component
this._hotelEffect
    .getHotel()
    .pipe(takeUntil(this.onDestroy))
    .subscribe((resp) => {
        this.createHotel(resp);
        this._changes.detectChanges();
      });

Is it feasible to invoke a method without any arguments on this basic subscription?

Demonstration (does not work due to overload):

My current workaround:

Answer №1

Similar questions

Learning how to effectively utilize the tap and map functions in Angular

Tips for displaying backend error messages on the frontend

Leveraging the power of Bootstrap in combination with Angular 2, integrate both ng-bootstrap and the traditional Bootstrap to enhance

Angular's custom reactive form validator fails to function as intended

What is the method for generating a data type from an array of strings using TypeScript?

The 'prop' property is not found within the 'IntrinsicAttributes & CustomComponentProps' type

What is the process for creating route transition animations in Angular RC.5?

The Angular2 application encountered a 404 file not found error while trying to read a Const from a ts

Dealing with TypeScript errors TS2082 and TS2087 when trying to assign an Away3D canvas to a variable

Basic cordova application that transfers data from one page to another using typescript

In fact, retrieve the file from an S3 bucket and save it to your local

Is there an rxjs operator that includes both on-next and on-error callbacks?

I require all of this to be brought back as one complete entity. If, for instance, the object is given the value 10/26, it should be interpreted as part of the input

Error when using ES6 modules in ts-jest

When incorporating an array as a type in Typescript, leverage the keyof keyword for improved

Steps for including a component in a loop using Angular 6

The error message 'tagName' is not a valid property for type ChildNode in Typescript

"Creating a Typescript function that guarantees a non-null and non-undefined return

Enhance Angular's User Interface using the Express Backend

Trouble with executing simple code in a new project (binding, input, ng model) across different browsers