Managing Angular routing: selectively updating named outlets without reloading submodules

My routing configuration currently reloads Module2 ListComponent on every routing event. However, I want to prevent the list from reloading when a user clicks on a list item within ListComponent.

Specifically, when navigating from module2/route1 to module2/route2, I only want the details outlet to be updated without refreshing the list.

I initially considered changing 

<router-outlet name="list"></router-outlet>
to 
<app-list-component></app-list-component>
. But this approach results in constant reloading of the list component, similar to how it was handled by the router. It seems that the app-routing module reloads everything again. How can I prevent this?

app.component.html

  <router-outlet></router-outlet>

app-routing.module.ts

  const routes: Routes = [
  {
    path: 'module1',
    loadChildren: () =>
      import('./module1/module1.module').then(
        (m) => m.Module1Module
      ),
  },
  {
    path: 'module2',
    loadChildren: () =>
      import('./module2/module2.module').then(
        (m) => m.Module2Module
      ),
  },

module2.component.html

  <router-outlet name="list"></router-outlet>
  <router-outlet name="details"></router-outlet>

module2-routing.module.ts

const routes: Routes = [
  {
    path: `route1`,
    component: Module2Component,
    children:
    [
      {
        path: '',
        outlet: 'list',
        component: ListComponent,
      },
      {
        path: '',
        outlet: 'details',
        component: Main1Component
      }
    ],
  },
  {
    path: `route2`,
    component: Module2Component,
    children:
    [
      {
        path: '',
        outlet: 'list',
        component: ListComponent,
      },
      {
        path: '',
        outlet: 'details',
        component: Main2Component
      }
    ],
  },
  {
    path: '',
    component: Module2Component,
    children:
    [
      {
        path: '',
        outlet: 'list',
        component: ListComponent,
      }
    ],
  },
angulartypescriptangular-routingangular-router

Answer №1

Consider consolidating your components for different routes into a single list component. You can then utilize the details component as either a child component within the list or as multiple children components within the list. Here's an example:

 const routes: Routes = [
  {
    path: `list`,
    component: ListComponent,
    children:
    [
      {
        path: '',
        outlet: 'details',
        component: Main1Component,
      },
      {
        path: '',
        outlet: 'details2',
        component: Main2Component,
      }
    ],
  }]

Answer №2

It is recommended to use this specific routing approach, where the parent contains an empty string and houses the list component. Subsequently, only the child routes are refreshed without affecting the list component!

Routing

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Module2Component } from './module2/module2.component';
import { Main2Component } from './main2/main2.component';
import { Main1Component } from './main1/main1.component';

const routes: Routes = [
  {
    path: ``,
    component: Module2Component,
    children: [
      {
        path: 'route1',
        component: Main1Component,
      },
      {
        path: 'route2',
        component: Main2Component,
      },
    ],
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class Module2RoutingModule {}

Module2 component

<app-list />
<router-outlet></router-outlet>

Check out the Stackblitz Demo here

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

Encountering the issue of receiving undefined values for both error and url during the utilization

I'm currently working on a file called createCheckoutSession.ts: import { db } from '../firebase/firebaseInit'; import { collection, addDoc, onSnapshot } from 'firebase/firestore'; import { User } from 'firebase/auth'; e ...

typescriptfirebasegoogle-cloud-platformgoogle-cloud-firestorestripe-payments

Parsing errors occurred when using the ngFor template: Parser identified an unexpected token at a specific column

In my Angular CLI-built application, I have a component with a model named globalModel. This model is populated with user inputs from the previous page and displayed to the user in an HTML table on the current page. Here's how it's done: <inp ...

angulartypescript

Inject Angular 2 component into designated space

I am working on a website that requires a settings dialog to be loaded in a designated area upon clicking a button. The settings dialog is a component that retrieves data from REST endpoints. I am hesitant to simply insert the component and hide it as I ...

javascriptangulartypescript

If the table spans multiple pages, a top margin will be added to ensure proper formatting. This feature is implemented using jspdf-autotable

I have encountered an issue with my PDF function where using multiple tables and the didDrawPage() hook to add headers and footers results in images being drawn multiple times in the header due to the multiple tables. To resolve this, I created a separate ...

javascripttypescriptjspdfjspdf-autotable

Troubleshooting Recursive Angular Forms: Resolving Issues with ngIf Control Paths

Check out the stackblitz link for the following code snippet. I am currently in the process of creating a highly intricate Angular form using FormArrays and child components. The structure involves a `group` object that contains elements such as `conjuncto ...

angularangular-forms

Problem with Angular input field not updating after making an http request

After receiving a response from an http get request, I'm attempting to map the data with an input field but it's not working as expected. this.http.get<any>('https://localhost:9002/....../getEmail') .subscribe({ ...

angular

Issue with memory leakage detected during compilation of Angular 12 application

My coworker and I are currently in the process of optimizing our Angular 12 application for our enterprise. The Issue: One major challenge we have encountered while developing our application is the continuous increase in memory usage each time the angul ...

angularnpmoptimizationmemory-leaksenterprise

Exploring alternative options for routing in Angular2 using auxiliary outlets

I have a folder structure that looks like this: my-app |- src |- app |- private |- private.routing |- public |- public.routing app.routing The contents of the private.routing file are as follows: export const rout ...

angularangular2-routing

I implemented progress bars in Angular 2 that have changing maximum values. The service updates the maximum value for each bar dynamically. Currently, the progress bars are functioning at 100% capacity

this.games=[ {"val":50, "name":"Articlescontributed","max":35}, {"val":30 ,"name":"Articlesrated", "max":999}, {"val":20, "name":"Views", "max":35}, {"val":30, "name":"Ratings", "max":35}, {"val":20, "name":"Follower", "max":200}, { ...

angulartypescript

Create a function that will always output an array with the same number of elements as the input

Is there a method to generate a function that specifies "I accept an array of any type, and will return the same type with the same length"? interface FixedLengthArray<T, L extends number> extends Array<T> { length: L; } export function shuf ...

typescripttypescript-typingstypescript-generics

The component is no longer able to locate the imported element when it is being shared

Recently, I imported a component into the shared module in order to use it across 2 different modules. However, upon recompiling the app, an error message appeared stating that the jodit-editor, which is utilized by the shared component, is not recognized ...

javascriptangulartypescript

Guide on combining vendor CSS files in a React application using Webpack

Incorporating third-party libraries is an essential part of my project. For example, I have Mapbox GL installed via npm, which comes with CSS files needed for its functionality. The Mapbox GL CSS file can be found at mapbox-gl/dist/mapbox-gl.css in the no ...

javascriptcsstypescriptwebpackcss-modules

Updating the useState() function in React when the value changes can be done by utilizing the

I'm struggling to update the count value in my React project. Within my dynamic set, I aim to display the size of the set whenever it changes! My goal is to continuously update the count variable to match ratedSet.size whenever the set's size c ...

reactjstypescriptreact-hooksuse-effectuse-state

What could be causing the cyclic dependency problem after upgrading to Angular 9?

I am experiencing an issue with a specific file containing the following code: import { Injectable } from '@angular/core'; import { I18n } from '@ngx-translate/i18n-polyfill'; import { isNumber } from 'lodash'; import { Confir ...

angulartypescriptangular-clikarma-webpack

Angular2 had a delay in processing the 'mouse wheel' input event for x milliseconds because the main thread was occupied

Currently, I am working with Angular2 (r.2.0.0) along with typescript (v.1.8.10). I have encountered an issue where Chrome does not respond while scrolling and displays a warning message stating: "Handling of 'mouse wheel' input event was delayed ...

c#angulartypescriptscrollwebsocket

Is Typescript capable of identifying void functions automatically?

Being new to Typescript and programming in general. Instead of using: function greet(greeting: string): void; Can I simplify it like this? Is there any type inference? function greet(greeting: string); ...

typescripttypescript-typingsinference

Tips for arranging TypeScript AST nodes and generating a TypeScript file as the final result

My objective is to reorganize the code in a way that sorts the link(foo) value based on the string text: import Text from '~/text.js' export default function rule(text: Text) { // Sorting rules alphabetically } Although I have made some progr ...

node.jstypescriptabstract-syntax-tree

React with Typescript - Type discrepancies found in Third Party Library

Recently, I encountered a scenario where I had a third-party library exporting a React Component in a certain way: // Code from the third party library that I cannot alter export default class MyIcon extends React.Component { ... }; MyIcon.propTypes = { ...

javascriptreactjstypescripttypes

extracting the HTML content from JavaScript and saving it into a standalone file

update When I click a link, a popup opens and I see all this HTML. The smile method is called when I click the link, and we append HTML in that method so that we can see it when the popup is opened. I moved it to a separate file something.component.html, ...

javascriptjqueryhtmlangularjstypescript

Is it possible for Angular Components to be dynamically generated based on a parameter?

Is it feasible to achieve the following functionality in Angular? I am interested in creating multiple components that share a common base interface of properties; for instance, a string component, a date component, and an integer component, each with uni ...

angularcomponents