Utilizing Angular's async pipe to dynamically customize and assign values to variables

Question

Utilizing Angular's async pipe to dynamically customize and assign values to variables

I have a parent component named A with over 20 child components, all of which extend A and are located within

<ng-content></ng-content>

. Within component A, I am updating the value of the showContent variable in multiple places.

The issue arises because I am using *ngIf="showContent" in all child components. Unfortunately, the views of the child components do not reflect changes when the value in A is updated. In order to address this problem, I have considered two options:

A) Utilize Output + EventEmitter, although I am hesitant about duplicating code like below in every child component:

onValueChange(val: boolean) {
  this.showContent = val;
}

B) Explore the use of async pipe. However, one challenge is that I am updating the value within GET/POST subscriptions, as shown below:

this.httpDataHandler.get<...>(...).subscribe(response => {
    // lots of stuff
    showContent = true;
});

Is there a solution that allows me to utilize the async pipe while eliminating redundant code in all child components?

angular typescript asynchronous pipe

Answer 1

Answer №1

Perhaps utilizing a BehaviorSubject would be useful in this scenario:

showContent = new BehaviorSubject(false)
...
this.httpDataHandler.get<...>(...).subscribe(response => {
  // many tasks
  showContent.next(true);
});
...
*ngIf="showContent | async"

Alternatively, you could also consider using the ChangeDetectorRef

constructor(private cdr: ChangeDetectorRef) {}
... 
this.httpDataHandler.get<...>(...).subscribe(response => {
  // many tasks
  showContent = true;
  this.cdr.markForCheck();
});
...
*ngIf="showContent"

In instances like these, it's possible that the issue stems from attempting to extract data from observables prematurely. Refactoring your code to avoid unnecessary subscriptions may provide a more elegant solution. However, without the complete context, it's challenging to offer specific advice...

Answer 2

Perhaps utilizing a BehaviorSubject would be useful in this scenario:

showContent = new BehaviorSubject(false)
...
this.httpDataHandler.get<...>(...).subscribe(response => {
  // many tasks
  showContent.next(true);
});
...
*ngIf="showContent | async"

Alternatively, you could also consider using the ChangeDetectorRef

constructor(private cdr: ChangeDetectorRef) {}
... 
this.httpDataHandler.get<...>(...).subscribe(response => {
  // many tasks
  showContent = true;
  this.cdr.markForCheck();
});
...
*ngIf="showContent"

In instances like these, it's possible that the issue stems from attempting to extract data from observables prematurely. Refactoring your code to avoid unnecessary subscriptions may provide a more elegant solution. However, without the complete context, it's challenging to offer specific advice...

Utilizing Angular's async pipe to dynamically customize and assign values to variables

Answer №1

Similar questions

Is it possible for a redis client to function without having a redis datastore installed?

Trouble installing Angular: ENOENT Error causing issues

The additional parameters I am trying to append are being overwritten by the set parameters in the httpInterceptor

Issue accessing page from side menu in Ionic 2 application

Transform an Array into a String using Angular

Using the Markdown attribute in this context prevents the translate pipe from translating the string

When using the ngFor directive, the select tag with ngModel does not correctly select options based on the specified

Creating a nested type using template literal syntax

The duration required to render DOM elements

What is the best way to connect input values with ngFor and ngModel?

The Angular2 project using ag-grid-enterprise is currently experiencing difficulties with implementing the License Key

Issue with applying the React Material UI ThemeProvider

TypeScript issue encountered with parseInt() function when used with a numeric value

Utilizing Ionic with every Firebase observable

Retrieve all items that match the ids in the array from the database

Does Angular 8 development mode implement tree-shaking?

Error encountered when trying to use the .find function in Typescript: "The expression is not callable."

Error: nativeElement.getBoundingClientRect method is undefined

What is the correct way to incorporate service within a component function?

How can I ensure that a particular component type passes the typescript check in a react-typescript project?