Refresh the content of an Angular modal with updated data each time the modal is launched

Currently, I am working on an angular web project that involves a main component class loading a Modal to update a report. Within this Modal, there are tabs - one of which is the transaction tab for which I am responsible. However, I have encountered an issue where the transactions tab retains the data it loaded initially even after closing and reopening the update report modal. My goal is to ensure that the transactions tab reloads the data each time the update modal is opened. Below is where I retrieve the data:

enter ngOnInit() {
    this.getTransactions();
    this.getAllTransmodes();
}code here

This is the method used to fetch the data:

getTransactions(): void {
    this.onDeselect();
    this.response = this.reportTransactionsTabService.getTransactions(this.selectedReport.xmlGuid)
        .subscribe(
            items => {
                this.transactions = items;
                this.filteredTransactions = this.transactions;
                this.totalTransactions = this.filteredTransactions.length
                this.filterValue = "";
                this.currentSortField = null;
            },
            error => this.errorMessage = <any>error);
}

Answer №1

After some investigation, I discovered the answer to the issue at hand. The key was simply to extend from the OnChanges interface (which is one of Angular's Life-cycle Hooks):

export class ReportTransactionsTabComponent implements OnInit, **OnChanges**

Subsequently, I needed to invoke the functions that load data within the ngOnChanges method:

ngOnChanges() {
    this.getTransactions();
    this.getAllTransmodes();
}

This essentially ensures that these methods are repeatedly called whenever changes occur on the report Transactions Tab.

Answer №2

When utilizing a Tab to display transaction data, the ngOnInit() component lifeCycle hook specific to your PageComponent is not triggered upon clicking the tab. To ensure that data is loaded or refreshed upon tab click, you can implement a loadData method like this:

<div (click)="loadData()">TransactionTab</div>

Make sure to define the loadData method in your component as follows:

loadData() {
    // Code to load data
    this.getTransactions(); 
   this.getAllTransmodes();
}

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

How can I showcase images from a server in Node.js to an Angular 2 application?

I am currently facing an issue while trying to display uploaded files from Angular 2 using ngx-uploader and storing them on the backend (nodejs/feathers) with multer. I am unable to access and display the files, specifically images for now, but ultimately ...

Storing response data as a variable in TypeScript with Angular 2 can be achieved by declaring a variable

I am unfamiliar with TypeScript and need assistance. After performing a POST request, I received an _id that I now need to use to execute a PUT function for play pause. When the play pause button is clicked, the response should be sent to the server. Below ...

Struggling to locate the module 'firebase-admin/app' - Tips for resolving this issue?

While working with Typescript and firebase-admin for firebase cloud functions, I encountered the error message "Cannot find module 'firebase-admin/app'" when compiling the code with TS. Tried solutions: Reinstalling Dependency Deleting node_modu ...

Manually close the AntD Menu without using any shortcuts

I'm facing a unique situation with my table implemented using antd. Each row has a dropdown menu that opens a modal upon clicking. To ensure the dropdown menu doesn't trigger the row click event, I used stopPropagation on the menu item click. Eve ...

Managing properties of classes within callbacks using TypeScript

I am currently working on the following task: class User { name: string; userService: UserService; //service responsible for fetching data from server successCallback(response: any) { this.name = string; } setUser() { ...

What is the best way to assign default values when destructuring interfaces within interfaces in TypeScript?

My goal here is to create a function that can be used with or without arguments. If arguments are provided, it should work with those values; if not, default values should be used. The issue I'm facing is that although there are no TypeScript errors ...

Show information from the state using React and Typescript

I successfully retrieved data from an API using axios and stored it in the state of my React component. However, I am struggling to display this data on the web so that I can list all the information obtained from the API request. I have tried using the ma ...

Is it advisable to prevent Set and Map from having unspecified generics in TypeScript?

Upon reviewing some old code that I wrote, I realized that I had neglected to specify a generic type for a Set. The type was set as Set<unknown>. Strangely, despite this, I found that I could still utilize all the methods of the Set without encounter ...

Tips for extracting a specific segment from a URL string

Take a look at the outcome of the console.log below: console.log('subscribe:', event.url); "https://hooks.stripe.com/adapter/ideal/redirect/complete/src_1E2lmZHazFCzVZTmhYOsoZbg/src_client_secret_EVnN8bitF0wDIe6XGcZTThYZ?success=true" I need to ...

The function database is not defined in firebase_compat_app__WEBPACK_IMPORTED_MODULE_0__.default

Encountering an error message when attempting to connect my app to Firebase: firebase_compat_app__WEBPACK_IMPORTED_MODULE_0__.default.database is not a function After some testing, it seems the issue only arises when trying to connect to the database. The ...

Utilize Ant Design TreeSelect to seamlessly integrate API data into its title and value parameters

I am currently working on populating a Tree Select component in ANT Design with data fetched from an API. The response from the API follows this structure: projectData = ProjectData[]; export type ProjectData = { key?: number; projectId: number; ...

Checkbox selections persist when navigating between pages

I am currently working with Angular 9 and I have a list of checkboxes that need to default to true when displaying certain data. If one of these checkboxes is unchecked, it should trigger the display of specific information. The issue I am facing is that o ...

Unable to generate Angular project using the command "ng new app_name" due to error code -4058

Whenever I try to run the command ng new app-name, I encounter error -4058. If I execute the same command while opening cmd as an administrator in the directory C:/Windows/system32, the project creation process goes smoothly. However, if I change the dire ...

What is the best way to retrieve the current complete URL in a Next.js/Typescript component?

I'm working on a component and I need to retrieve the current full URL. Here's a simplified version of what I have: /** * Share dropdown component */ export const ShareDropdown: React.FC<{ className: string }> = ({ className, }) => { ...

Error in AngularX TS: Trying to invoke a type that does not have a callable signature

Encountering an issue while working on a component, specifically during ng serve/build process. Please note that this error is different from any console errors, despite what some may think. The expected outcome is for the code to successfully build and ru ...

Using Rails 5 API to generate a new object using JSON with nested resources

Here is the JSON data that was received as parameters from an external Angular web app: { "provincia": { "id": 1, "name": "Province" }, "username": "tester", "direccion": "new avenue 100", "email": "<a href="/cdn-cgi/l/email-protectio ...

What is the best way to incorporate Form Projection into Angular?

I have been attempting to incorporate form projection in Angular, inspired by Kara Erickson's presentation at Angular Connect in 2017, but I am encountering difficulties and errors along the way. view talk here The code provided in the slides is inco ...

The npm installation process has come to a sudden halt

Starting a web application in Angular 17 has been my goal. I typically run npm install followed by ng serve. However, this process suddenly stopped working. To troubleshoot, here are the steps I've taken: Updated npm to the latest version (10.2. ...

What is the best way to assign three different dates in my protractor test?

I am facing an issue with setting random dates in 3 date fields in a row using Protractor. The problem is that Protractor sets the dates too quickly and sometimes assigns invalid dates like: first data: 01/08/1990 (correct) second data: 01/09/0009 (inva ...

Restrict server routing in asp.net to only allow api calls

After successfully setting up an Angular 2 project using ASP.net with WebAPI, I encountered an issue while routing within Angular 2. When trying to access a specific route, such as "localhost:1234/login", the page displayed the following error: HTTP Err ...