Angular may struggle to detect changes when it comes to nested components

Question

Angular may struggle to detect changes when it comes to nested components

I encountered a similar issue to mine on Stack Overflow. However, despite following the steps provided in the solution, my implementation is still not working.
Here is the structure of my components:

Dashboard
- ActionButton
- Milestone
  - Table
- SupplierSearch
  - Table

I attempted to pass the array selectedRows from Table to Dashboard, and then to ActionButton using CustomEvent and

elRef.nativeElement.dispatchEvent

. However, when I tried to log the data to see if it was successfully passed to any parent component (Dashboard or Milestone) from Dashboard/Milestone/Table, the array did not get passed.

Please note that my code might be messy at the moment because I have been trying to fix this issue for almost a day and have experimented with various solutions. Kindly focus on the way I tried to implement the mentioned solution (CustomEvent and

elRef.nativeElement.dispatchEvent

).

I am truly grateful for the knowledge shared by the Stack Overflow community, so please do not downvote this post if my English is poor or if there are inherent flaws in my problem statement.

Table

import {
  Component,
  ElementRef,
  EventEmitter,
  Input,
  Output,
  TemplateRef,
} from '@angular/core';
import { TableColumnHeader } from './models/table-column-header';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.scss'],
})
export class TableComponent {
  @Input() rowData;
  @Input() headers: TableColumnHeader[] = [];
  @Input() columnTemplate: TemplateRef<any>;
  @Input() loading: boolean = false;

  @Output() selectedRowsEvent = new EventEmitter<any[]>();

  selectedRows = [];
  constructor(private elRef: ElementRef) {}

  // Rest of the TableComponent JavaScript code...

Milestone

// Milestone component JavaScript code...

Dashboard

// Dashboard component JavaScript code...

ActionButton

// ActionButton component JavaScript code...

angular typescript nested components parent-child

Answer 1

Answer №1

Challenges Faced in Passing the Data

The changes on the child component were not triggered when passing a complex object
As a result, the data got stuck at the dashboard (parent component) and did not reach the child component

https://i.sstatic.net/NRjIa.png

- The workaround is to pass the subscribe object

Another reason for the unsuccessful passage:
We have this view structure:
- Dashboard
  - ActionButton
  - Milestone
    - Table
  - SupplierSearch
    - Table
I was attempting to pass from table -> milestone -> dashboard -> actionbutton,

but I was actually selecting rows on the SupplierSearch view of the table on the UI. Therefore, it never reached the Milestone from the Table.

Solution

Pass the array up to the parentmost component (Dashboard) with event emitters
Create a Subject$ (observable) to broadcast the complex data to the child component

A Subject is similar to an Observable but can multicast to many Observers. Subjects are like EventEmitters: they maintain a registry of many listeners. — source rxjs

Code snippet
```
dashboard.ts

selectedRows$ = new Subject<any[]>();

onNotify(rowsEmitted: any[]): void {
    console.log('from Dashboard onNotify ');
    this.selectedRows = rowsEmitted;
    this.selectedRowsCount = rowsEmitted.length;
    console.log(this.selectedRows);
    this.selectedRows$.next(rowsEmitted);
  }
```
- on notify is the final function in the chain to pass the array up to the parent component
- Then create an anonymous observer and subscribe (next())

Subject selectedRows$ will then be passed to the child component action button

dashboard.html

<app-action-button [selectedRows]="selectedRows$">
</app-action-button>

An anonymous observer and subscriber will be created

action-button.ts

ngOnInit(): void {
    // this.router.navigate([backUrl]);
    console.log('from action button component ');
    console.log(this.selectedRows);
    this.selectedRows.subscribe((selectedArray) =>
      console.log('from action button ngOnInit: ' + selectedArray)
);

Answer 2

Challenges Faced in Passing the Data

The changes on the child component were not triggered when passing a complex object
As a result, the data got stuck at the dashboard (parent component) and did not reach the child component

https://i.sstatic.net/NRjIa.png

- The workaround is to pass the subscribe object

Another reason for the unsuccessful passage:
We have this view structure:
- Dashboard
  - ActionButton
  - Milestone
    - Table
  - SupplierSearch
    - Table
I was attempting to pass from table -> milestone -> dashboard -> actionbutton,

but I was actually selecting rows on the SupplierSearch view of the table on the UI. Therefore, it never reached the Milestone from the Table.

Solution

Pass the array up to the parentmost component (Dashboard) with event emitters
Create a Subject$ (observable) to broadcast the complex data to the child component

A Subject is similar to an Observable but can multicast to many Observers. Subjects are like EventEmitters: they maintain a registry of many listeners. — source rxjs

Code snippet
```
dashboard.ts

selectedRows$ = new Subject<any[]>();

onNotify(rowsEmitted: any[]): void {
    console.log('from Dashboard onNotify ');
    this.selectedRows = rowsEmitted;
    this.selectedRowsCount = rowsEmitted.length;
    console.log(this.selectedRows);
    this.selectedRows$.next(rowsEmitted);
  }
```
- on notify is the final function in the chain to pass the array up to the parent component
- Then create an anonymous observer and subscribe (next())

Subject selectedRows$ will then be passed to the child component action button

dashboard.html

<app-action-button [selectedRows]="selectedRows$">
</app-action-button>

An anonymous observer and subscriber will be created

action-button.ts

ngOnInit(): void {
    // this.router.navigate([backUrl]);
    console.log('from action button component ');
    console.log(this.selectedRows);
    this.selectedRows.subscribe((selectedArray) =>
      console.log('from action button ngOnInit: ' + selectedArray)
);

Angular may struggle to detect changes when it comes to nested components

Answer №1

Challenges Faced in Passing the Data

Similar questions

Oops! A mistake was made by passing an incorrect argument to a color function. Make sure to provide a string representation of a color as the argument next time

Unlock the secrets of extracting video from a livestream and seamlessly transferring it to a local web server without the need

What are the steps to resolve the DOMException error "Failed to execute 'open' on 'XMLHttpRequest': Invalid URL" in Angular HttpClient when making requests to a third-party server or API?

What is the process for loading data with no input provided?

The Typescript intellisense feature in VS Code seems to be malfunctioning

Utilizing TypeScript interfaces with additional parameter object members does not result in the anticipated compilation error

Mastering the utilization of bootstrap-select in TypeScript while ensuring "noImplicitAny" is set to true can be quite the challenge, especially when confronted with the issue of bootstrap-select/index

Assign each active class name to the Tab components in React

The module 'AnotherModule' in a different file has unexpectedly imported a value 'Module in file'. Make sure to include a @NgModule annotation to resolve this issue

The process of a ReactJS component's lifecycle is affected when an onClick event triggers a fetch function, causing the state

Encountering an error when using Jest and the envalid library to test a React application: process.exit invoked with code "1"

When using the map function, I am receiving an empty item instead of the intended item based on a condition

Tips for creating a personalized asynchronous Express handler that seamlessly receives specific typed parameters

Alert displaying NextJS props

Tips for Creating an Array of JSX Elements:

Encountering an endless loop within a data rest API in a React application

The element's 'nativeElement' property cannot be accessed because it is undefined

I am facing a problem with the code for my React login page and router

Sort through a list of objects by certain properties

Creating dynamic dxi-column with different data types in dxDataGrid