What is the best way to refresh a Component upon sending data to the server?

I'm in the process of developing a cross-platform application. I have a TabView Component that needs to update a tab after sending data to the server. During the initialization (ngOnInit) phase, I dynamically set the content of my tab. However, when I send the data to the server and navigate to the summary page, ngOnInit is not called again, leading to the content not being updated. Any suggestions on how to achieve this?

Highlighted code snippet

home.component.ts

ngOnInit(){
 this.homeService.getPrenotazioni().subscribe((res) => {
  var layout = <StackLayout>this.page.getViewById("prenotazioni");
  //...set content...
 };
}

tabs.component.html

<GridLayout>
    <TabView androidTabsPosition="bottom">
        <page-router-outlet *tabItem="{title: 'Home'}" name="homeTab"></page-router-outlet>
        <page-router-outlet *tabItem="{title: 'Prenota Ritiro'}" name="prenotaritiroTab"></page-router-outlet>

         <!-- other tabs -->
    </TabView>
</GridLayout>

After sending data from the "Prenota ritiro" tab and switching to the "Home" tab, I aim to refresh the content within the "Home" tab.

Answer №1

It appears that there may be a discrepancy between the nativescript page and angular component life cycles. Have you considered setting the subscription in the navigatingTo event of the page?

Answer №2

Have you thought about implementing the onSameUrlNavigation option in your router configuration? If you're utilizing the router-outlet within a tab, this approach should help resolve any issues.

@NgModule({
 imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: ‘reload’})],
 exports: [RouterModule],
 })

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

Leveraging the power of Bootstrap in combination with Angular 2, integrate both ng-bootstrap and the traditional Bootstrap to enhance

Beginning a fresh Angular 2 Project, I am inclined to incorporate Bootstrap 3 for the user interface. What would be the most advisable approach in this scenario? Is it feasible to blend ng-bootstrap and the original Bootstrap components? I noticed that th ...

Why does Typeorm consistently encounter insertion failures when attempting to insert into two tables, and why does Math.random() continuously return the same number?

Here is the code snippet I am working with: import { getRepository } from "typeorm"; import { NextFunction, Request, Response } from "express"; import { Users } from "../entity/Users"; import { Verify } from "../entity/Ve ...

Can Material UI be defined as a peerDependency while maintaining its types as a DevDependency?

Is there a way to set Material UI as a peerDependency while keeping its types as DevDependency? I'm currently working on a component library using React + Typescript, with components based on Material UI and Rollup as the module bundler. For example ...

Discover the myriad of possibilities created by combining arrays

I am working on a code snippet that aims to generate an array containing all possible combinations between two or more arrays. However, I am encountering a specific issue. getCombn(arr: string | any[], pre?: string | undefined) { pre = pre || ' &a ...

What steps can be taken to resolve the issue of being unable to rename an element in Typescript?

Why does VS code editor sometimes prevent me from renaming my typescript symbol using the f2 key? I keep encountering the error message "This element cannot be renamed." https://i.stack.imgur.com/mmqu9.png In some of my other projects, I am able to renam ...

Implementing a universal (click) attribute for Angular 2 in CSS

When using Angular 1, it was as easy as following this syntax: [ngClick], [data-ng-click], [x-ng-click] { cursor: pointer; } This snippet ensured that any tags with the ng-click attribute displayed a pointer cursor. How can we achieve the same effect ...

The cdkDragMoved event now provides the pointerPosition using the clientX and clientY coordinates rather than the container

I'm currently working on retrieving the x and y coordinates of a box based on its position within the container. Here's an example that I found on https://material.angular.io. To see how the cdkDragMoved event works, you can check out my small d ...

Tips on refining API response using Angular 2's HTTP module

This is the data I received from my transactions API: [{ "id": 1, "description": "Sandwich", "date": "2017-09-01", "category": "Take away", "tags": ["Holidays"], "amount": -2 },{ "id": 2, "description": "Wage", "date": "2017-08- ...

What is the proper way to add additional properties to an array object when initializing it in TypeScript?

Is there a more elegant solution for creating an object of type: type ArrayWithA = [number, number, number] & { a: string }; I accomplished this by: const obj : any = [1, 2, 3]; obj.a = "foo"; const arrayWithA : ArrayWithA = obj as ArrayWith ...

The header grid will disappear in the p-dialog when the browser is minimized

Check out this informative article on creating a dynamic dialog box using PrimeNG here Take a look at the image below to see how the dialog box appears when opened: One issue I am facing is that the grid header gets hidden when I minimize the browser ...

Exploring the Benefits of Utilizing the tslint.json Configuration File in an Angular 6 Project

https://i.stack.imgur.com/j5TCX.png Can you explain the importance of having two tslint.json files, one inside the src folder and one inside the project folder? What sets them apart from each other? ...

Typescript MUI Autocomplete: Can you specify the parameter type of the PaperComponents function?

If you use MUI's Autocomplete, there is a property called PaperCompomponent that allows you to pass your own react component. This property is a function with properties as a parameter, which can then be used to pass on to your custom component. In T ...

What is the best way to loop through properties of a Typescript interface?

I am currently working with an interface called FilterData, which has the following structure: export interface FilterData { variables?: string[]; processDefinitionKey?: string; } When I make a request to the server, I receive an object named filterS ...

Can you provide guidance on effectively utilizing a Pinia store with Vue3, Pinia, and Typescript?

I'm currently facing challenges while using the Pinia store with TypeScript and implementing the store within a basic app.vue Vuejs3 option api. Here is my app.js file: import {createApp} from 'vue' import {createPinia} from "pinia&quo ...

Guide on compiling SCSS to CSS when running npm start

When running my application with npm start, I'm unable to compile scss files to css live. Is there a way to achieve live reload for sass to css similar to how ts are compiled to js by the tsc:w utility? Currently, I have to stop the build, then run gu ...

The attribute 'XXX' is not found within the type 'IntrinsicAttributes & RefAttributes<any>'

My coding hobby currently involves working on a React website using TypeScript. I recently came across a free Material UI template and decided to integrate it into my existing codebase. The only challenge is that the template was written in JavaScript, cau ...

When trying to retrieve a value from a custom render function in React with TypeScript, an error occurs indicating that the value is not assignable to type 'ReactNode'

Recently, I attempted to develop a versatile swiper component using Next.js 13 (App Router) v13.4.12 along with TypeScript. However, I encountered an issue when trying to access data from the component props, which involves a custom function for rendering ...

Using NavParams within a service component,

I'm facing a challenge in accessing NavParams within a provider, and simply importing NavParams is not solving the issue. Here's a brief overview of my application: users input their name and address, a pin is dropped on the map based on the add ...

Error: Call stack size limit reached in Template Literal Type

I encountered an error that says: ERROR in RangeError: Maximum call stack size exceeded at getResolvedBaseConstraint (/project/node_modules/typescript/lib/typescript.js:53262:43) at getBaseConstraintOfType (/project/node_modules/typescript/lib/type ...

Running ngAfterViewInit() code in Angular should be done only after Inputs() have been initialized

Within a particular component, I have implemented some code in ngAfterViewInit: @Input public stringArray: string[]; public newArray: string[]; ngAfterViewInit() { this.newArray = this.stringArray.filter(x => x.includes('a')); } I placed ...