Discover updates in parent component information using Angular

This is a scenario where a parent component calls a dataservice to retrieve data. The component defines columns for a table:

tableInterventionsColumns: TableColumn<Interventions>[] = [

    {
      label: 'Date',
      property: 'dateIntervention',
      type: 'text'
    },
    ...
    
  ];

The component also fetches data from the dataservice and stores it in an array:

tableInterventionsData: Interventions[];

.........

this.TankDetailsService.getInterventions(this.idCit).subscribe((Interventions: Interventions[]) => {
      
      this.tableInterventionsData = Interventions;

    });

Both arrays can be viewed in the console.

The template includes a child component that receives the data as input:

<vex-widget-table-interventions [columns]="tableInterventionsColumns"
                    [data]="tableInterventionsData"
                    class="w-full overflow-auto shadow" gdColumn="3 / -1"
                    gdColumn.lt-md="1 / -1"
                    gdColumn.lt-sm="1"></vex-widget-table-interventions>

The child component is responsible for creating a datatable using the provided arrays:

import { AfterViewInit, Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
...

Although the columns are fetched correctly, there seems to be an issue with retrieving the data. Any suggestions or ideas on how to resolve this issue would be appreciated, especially for someone new to Angular. Thank you!

Answer №1

Using ngOnChanges for this purpose is not recommended. You can find more information here, as its intended use is to handle current and previous values.

this.dataSource.data = this.data.currentValue

Instead of passing an array data, I recommend passing an Observable of it.

For example, in the parent component:

this.tableInterventionsData = this.TankDetailsService.getInterventions(this.idCit)

And then in the child component WidgetTableInterventionsComponent:

@Input() data: Observable<T[]>;

ngOnInit() {
    this.data.subscribe(data => this.dataSource.data = data)
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Understanding how to extract an enum from a string and its corresponding value in TypeScript

I am working with a simple enum called errorCode, shown below: export enum SomeErrorCodes { none = 0, notFound = 1, duplicated = 2 } Currently, I am receiving the name of the enum as a string "SomeErrorCodes" and a number, for example, 1. How ...

Is it secure to use ES6 in Typescript with nodejs/koa?

As I transition to using TypeScript in a Node.js/koa project, I came across the need to modify the .tsconfig file to target ES6. Otherwise, an error message will appear stating: Generators are only available when targeting ECMAScript 6 or higher. // index ...

Beginning selenium web-driver with TypeScript - a simple guide

Currently, I am embarking on a UI Automation project utilizing Selenium and typeScript. I would greatly appreciate any insights on how to proceed with this endeavor. My previous experience involves working with Selenium WebDriver in Java. I have successf ...

What is the procedure for sending a secondary route parameter to the angular 2 services module?

I'm a beginner with Angular 2 and I'm seeking advice on how to pass multiple parameters to Angular's service module. For instance, here is the first parameter I'm passing to the service through the router link. In the home-component.ht ...

Nextjs introduces an innovative "OnThisDay" functionality, leveraging getServerSideProps and Date.now() to provide real-time information

I am currently working on adding an "OnThisDay" feature in my Nextjs project, inspired by Wikipedia's style of displaying events that happened on a specific date. To achieve this, I have implemented a function structured like the following code snippe ...

``Can someone provide guidance on how to showcase the validation check result for a text-field in the snackbar using Vuet

One of the challenges I'm facing in my project is implementing a validation function for the customer form. While using the vuetify validate method would be the easy way to go, I need to display the validation messages both as snackbar and next to eac ...

What is the most efficient method to retrieve an API in Angular?

Recently, I dedicated some time to a personal Angular project. While working on it, I decided to experiment with making an API call to PokeAPI in order to retrieve the .svg image of a Pokemon along with its name. After successfully implementing this featur ...

Unable to retrieve information from a function in Vue.js (using Ionic framework)

When attempting to extract a variable from a method, I encounter the following error message: Property 'commentLikeVisible' does not exist on type '{ toggleCommentLikeVisible: () => void; This is the code I am working with: <template& ...

What data type should be used for process.stdin in a TypeScript/Node.js environment?

When faced with a variable that can either be fs.createReadStream('file-path') or process.stdin, the decision on which type to use can be difficult. It is important to determine if both returns are of type net.Socket, fs.ReadStream, or stream.Red ...

Switch the background image in a table data cell using ngIf in Angular

Can you help me with this: I have a td in a table with a background image applied <td background="assets/images/crew/sign.jpg" style="background-repeat: no-repeat; background-size: contain; background-position: center center"> W ...

Experiencing difficulties while running the npm internationalize command

Package Details { "name": "m.zbor.md", "version": "1.0.0", "description": "Mobile version of Zbor.md website", // more package details... } Typescript Configuration { "compilerOptions": { "target": "es5", "module": "commonjs", // m ...

Can we create an intersection type of Records by pairing keys with tuples or unions of values in a one-to-one correspondence?

If I have tuples similar to this for keys and values: type Keys = ['North', 'East', 'South', 'West']; type Values = ['n', 'e', 's', 'w']; Is there a way to achieve a structure ...

Is there a way to halt the current traversal of visitEachChild in TypeScript Transformer API?

While navigating through each child node of a parent node using visitEachChild, is there a way to stop the process when I no longer wish to visit the subsequent child nodes? For example: Parent node Node 1 Node 2 <-- My target point. Node 3 Node 4 Nod ...

The React-native-vision-camera is unable to connect to the rear-facing camera

Currently, I am facing a challenge using the 'normal' camera on my iPhone 11 Pro. I have implemented react-native-vision-camera in my project. When executing the following code: const devices = useCameraDevices(); const deviceBack = devices.back; ...

Refreshing in Angular 4 page causing issues on mobile devices and Safari browser

I'm struggling to troubleshoot this bug and am seeking guidance from someone who can help steer me in the right direction. Within an Angular 4 application, I have an http.get request targeting the YouTube Data API-- everything functions properly in C ...

Style your progress bar using styled components

I am experiencing issues with my code where only the style appearance: none; seems to be working. I have been following a tutorial on building a progress bar component using ReactJS styled components, which can be found at this link: . Can anyone pinpoin ...

Is there a way to make sure that ngbpopovers stay open even when hovering over the popover content?

I have implemented a ngbpopover to display user information on an element. Currently, the popover is triggered on both hover and click events, but I would like it to remain open when hovered over, instead of closing as soon as the mouse moves away. How c ...

Implement a delay for a specific function and try again if the delay expires

In my TypeScript code, I am utilizing two fetch calls - one to retrieve an access token and the other to make the actual API call. I am looking to implement a 1-second timeout for the second API call. In the event of a timeout, a retry should be attempted ...

Using Angular 2 for Applet Integration

I am currently facing an issue with embedding my Applet .jar file into my Angular 2 Project. Many solutions suggest using the <applet></applet> tag, but I encounter the following error when attempting to do so: Unhandled Promise rejection: Te ...

Issue with Docker setup for managing a PNPM monorepo

As a newcomer to Docker, I am attempting to configure my fullstack API REST project. Within my PNPM workspace, I have two applications - a frontend built with Angular and a backend developed using AdonisJS. My goal is to create a Docker configuration for P ...