OnPush strategy and template updates: Propagating modifications to the parent component

Question

OnPush strategy and template updates: Propagating modifications to the parent component

I am currently facing an issue with a parent component that consists of two templates. The first template simply displays data-bound text, while the second template contains a child component responsible for updating the data model. Both the parent and child components use ChangeDetectionStrategy.OnPush.

The problem arises when the data updates initiated from the child component's ngOnInit function are not being detected by the change detection mechanism in the parent component. This results in the parent component displaying the value set in the constructor of the child component, instead of the value set in the ngOnInit function.

I have explored various approaches, such as using markForCheck and @Output events in the child component, but these solutions did not work as expected due to the parent-child relationship being established through ng-template rather than direct component nesting.

I am seeking suggestions on the cleanest and most Angular OnPush-friendly approach to pass data from a ng-template created child component to its parent, while maintaining loose coupling between components and services.

javascript angular typescript

Answer 1

Answer №1

You have a solid understanding of using observables, async pipes, and the OnPush strategy. However, delving a bit deeper into the Angular component lifecycle events is essential to mastering these concepts.

Let's break it down in a simplified version:

Parent component constructor()
Child component constructor()
Parent component onInit() - evaluates @Input templates and ngIf directives
Child component onInit() - triggers changes to properties used in the parent
Parent afterViewInit()

It's crucial to note that when the onInit in the child component is called, the directives in the parent component have already been evaluated. Essentially, the content inside the [ngIf] template is already set, eliminating the need for additional change detection or updates.

It's important to avoid altering data used in the parent component from the child component's onInit(), as this can lead to unexpected issues.

Waiting for all components to be fully instantiated before triggering changes ensures that all views are updated properly.

For instance, in your child component:

setTimeout(()=> this.dataService.setValue("hello"), 1000)

This approach also works if you use markForCheck in the ngAfterViewInit of your parent component:

ngAfterViewInit(): void {
    this.changeDetector.markForCheck();
}

Alternatively, if you avoid using *ngIf, the value will be re-evaluated.

<div><b>Value from regular div: </b>{{ dataService.value | async }}</div>

While these workarounds may be effective, it's best practice to refrain from altering data in the child component's onInit to ensure a smoother functioning.

Answer 2

You have a solid understanding of using observables, async pipes, and the OnPush strategy. However, delving a bit deeper into the Angular component lifecycle events is essential to mastering these concepts.

Let's break it down in a simplified version:

Parent component constructor()
Child component constructor()
Parent component onInit() - evaluates @Input templates and ngIf directives
Child component onInit() - triggers changes to properties used in the parent
Parent afterViewInit()

It's crucial to note that when the onInit in the child component is called, the directives in the parent component have already been evaluated. Essentially, the content inside the [ngIf] template is already set, eliminating the need for additional change detection or updates.

It's important to avoid altering data used in the parent component from the child component's onInit(), as this can lead to unexpected issues.

Waiting for all components to be fully instantiated before triggering changes ensures that all views are updated properly.

For instance, in your child component:

setTimeout(()=> this.dataService.setValue("hello"), 1000)

This approach also works if you use markForCheck in the ngAfterViewInit of your parent component:

ngAfterViewInit(): void {
    this.changeDetector.markForCheck();
}

Alternatively, if you avoid using *ngIf, the value will be re-evaluated.

<div><b>Value from regular div: </b>{{ dataService.value | async }}</div>

While these workarounds may be effective, it's best practice to refrain from altering data in the child component's onInit to ensure a smoother functioning.

OnPush strategy and template updates: Propagating modifications to the parent component

Answer №1

Similar questions

Traverse the JSON array in a loop

Omit the <span> tag when exporting to XLS format

The power of negative multiplication in TypeScript and React

Steps to have index.html display when running the build command in a Svelte project:

Having trouble updating values in Vue3 when accessing the next item in an object?

Turning XSD into TypeScript code

avoid loading javascript in ajax layer

When utilizing Vue components, the issue of "setattr" arises when trying to assign

The term 'App' is being referenced as a value when it is intended to be a type. Perhaps you meant 'typeof App'?

Parcel js is encountering difficulties running the same project on Ubuntu

Achieving optimal hardware performance for WebGL compatibility is essential

Retrieving and storing data using jQuery's AJAX caching feature

Utilizing TypeScript in Kendo UI for JQuery

Tips for utilizing AJAX to send two values to PHP for comparison

What is the purpose of the "Dot" symbol in the "runtimeArgs" property of the launch.json file in Visual Studio Code?

Save Component Characteristics in a type-safe array

Is there a way for me to access the names of the controls in my form directly from the .html file?

Is it possible to retrieve the value from the searchbar on the server?

Autocomplete feature in MUI allows filtering to begin after typing at least 3 characters

Tips for configuring a function to only be called once, even when the page is reloaded