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.

angulartypescriptnativescriptnativescript-angular

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

Using TypeScript to create a generic function that returns a null value

In my Typescript code, I have the following function: In C#, you can use default(T), but I'm not sure what the equivalent is in Typescript. public Base { ... } public Get<T extends Base>(cultura: string): T[] { let res = null; try ...

typescript

Retrieve the generic type parameter of an interface implementation

I am attempting to extract a type parameter from an interface in order to use it as a parameter for a generic function. In my particular scenario, I have the following generic types: interface ITranslatable<T, K extends keyof T> { translations: IT ...

typescripttypescript-generics

Instructions for transferring an Angular / Node.js application to a different computer

Hey there! I'm in the process of transferring my project to a new computer. Just to let you know, I've already set up node.js and mongoDB on the new machine. When it comes to the Angular app, I understand that I need to copy over the frontEnd d ...

node.jsangularcopy

Why is it necessary for the required type of a function parameter to be able to be assigned to

From Optional to Required Type const testFunc = (func: (param: number) => void): void => { func(3); }; testFunc((a?: number) => { console.log(a); }); From Required to Optional Type const testFunc = (func?: (param: number) => void): void = ...

typescript

Form in Angular 6 does not trigger the event

I am currently utilizing Angular 6 and have created an attribute directive. Within this directive, I have defined a click event. @Directive({ selector: "[pa-attr]" }) export class PaAttrDirective { @Input("pa-attr") @HostBinding("class") bgC ...

angular

Is there a more efficient method for providing hooks to children in React when using TypeScript?

My component structure looks something like this: Modal ModalTitle ModalBody FormElements MySelect MyTextField MyCheckbox DisplayInfo ModalActions I have a state variable called formVars, and a function named handleAction, ...

reactjstypescript

What is the best way to reset a dropdown list value in angular?

Is there a way to erase the selected value from an Angular dropdown list using either an x button or a clear button? Thank you. Code <div fxFlex fxLayout="row" formGroupName="people"> <mat-form-field appearance=&quo ...

javascriptangularjsangulartypescript

Experiencing difficulties establishing a connection with my NodeJs server socket and TypeScript

I've been struggling to run the code from this post and I really need some help. The code can be found at: https://medium.com/@mogold/nodejs-socket-io-express-multiple-modules-13f9f7daed4c. I liked the code as it seems suitable for large projects, but ...

node.jstypescriptexpresssocketssocket.io

When using Angular 2 formControl, manually changing the value may not be detected by the form

Having a simple form (as shown below), I am encountering an issue: Manually entering input value causes form.controls['myValue'].value to change If #myInput value is changed programmatically, the form completely ignores that change What could ...

angular

What are some ways to specialize a generic class during its creation in TypeScript?

I have a unique class method called continue(). This method takes a callback and returns the same type of value as the given callback. Here's an example: function continue<T>(callback: () => T): T { // ... } Now, I'm creating a clas ...

typescriptgenericsconstructor-overloadingtype-narrowingtypeguards

Lack of code completion in Nuxt options API when using typescript

After setting up Nuxtjs with typescript, I noticed that there are no code completions in the template and script as expected based on the title. Here is the code: <script lang="ts"> import Vue from 'vue'; import { FeaturedJobs } ...

typescriptvue.jsnuxt.js

JavaScript library declaration files are essential for providing type definitions and enabling

I have encountered a problem with my JS library and its declaration files (*.d.ts) in my TypeScript projects. For some reason, my TS project seems to be ignoring these declaration files. To investigate this issue further, I decided to conduct a simple tes ...

javascripttypescript

What is the best way to implement a timer using hooks in React?

Just getting started with React! I began my journey last week ;) My first task is to build a timer that includes a reset feature and can count seconds. While the reset function is functioning properly, the timer isn't. Can anyone suggest the best ap ...

reactjstypescript

What could be causing the delay in loading http requests in Angular?

When attempting to update the array value, I am encountering an issue where it works inside the httpClient method but not outside of it. How can this be resolved in Angular 14? Here is a snippet from app.component.ts: ngOnInit(): void { this.httpC ...

angulartypescriptangular14

What is the best way to prevent double clicks when using an external onClick function and an internal Link simultaneously

Encountering an issue with nextjs 13, let me explain the situation: Within a card component, there is an external div containing an internal link to navigate to a single product page. Using onClick on the external div enables it to gain focus (necessary f ...

javascripthtmlreactjstypescriptnext.js

Trigger an Angular2 component function from an HTML element by simply clicking a button

I'm just starting out with TypeScript and Angular2 and encountering an issue when trying to call a component function by clicking on an HTML button. When I use the **onclick="locateHotelOnMap()"** attribute on the HTML button element, I receive this ...

javascriptangularjsangulartypescript

Getting meta values in Angular2 is a common task that can be achieved through

Is there a way to retrieve the meta value from the HTML head in Angular2? For instance, let's say I have the following HTML structure of my project and I want to extract the meta tag with the name "userId". <!doctype html> <html> <he ...

angularangular-cli

Angular utilizes ZoneAwarePromise rather than a plain String output

I expected the giver code to return a string, but it is returning ZoneAwarePromise. Within the service: getCoveredPeriod() { let loanDetails = this.getLoanDetails().toPromise(); loanDetails.then((res: any) => { const coveredPeriodStart ...

javascriptangulartypescriptpromiserxjs

Modifying the editable functionality of grouped rows in Angular-Slickgrid

Looking for help with angular-slickgrid implementation. I need to enable editing of grouped rows (using Formatter: sum for children rows) and pass the values to all children within the same group. How can this be done without changing the references? ...

angularslickgrid

There seems to be an issue with the Typescript version compatibility in the node_modules folder for the Angular Material table cell component

While working on my project with Angular, I encountered an issue. I attempted to downgrade my TypeScript version to 3.9.7 but the problem persists. Below are the dependencies listed in my package.json: "private": true, "dependencies&qu ...

javascriptangulartypescriptangular-clitslint