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

The error message "No provider found for MatSidenavContainer within mat-sidenav-content" is being

app.component.html <mat-side-nav-container> <mat-sidenav #sidenav> <mat-nav-list> <a mat-list-item [routerLink]="'/accounts'"> Accounts </a> <a mat-list-item [routerLink]="&ap ...

angularangular-material

How to implement the connect function in an Angular 2 table

Topic: Angular Material 2 implementation of md-table UI using cdk-table Problem: Unable to trigger connect method after a user-initiated HTTP call receives a response Approach: Create a hot observable from a behavior subject in a service. The parent c ...

angulardatatablerxjsangular-material2angular2-observables

Enhancing keyboard accessibility with the spacebar for radio buttons and check boxes in Angular 2

I am currently working on a form in Angular 2 that includes radio buttons and checkboxes. When tabbing through the fields, they are highlighted properly. However, I am facing an issue with the radio buttons - I want them to be selected when I hit the space ...

angularaccessibilityangular-material2

A class in Typescript containing static methods that adhere to an interface with a string index

Take a look at this code snippet: interface StringDoers { [key: string]: (s: string) => void; } class MyStringDoers implements StringDoers { public static print(s: string) { console.log(s); } public static printTwice(s: string) { conso ...

typescript

Tips for resolving the issue with the 'search input field in the header' across all pages in angular 5 with typescript

I currently have a search field in the header that retrieves a list of records when you type a search term and click on one of them. The search function utilizes debounceTime to reduce API requests, but I'm encountering an issue where the search doesn ...

angulartypescript

Encountered an issue in Angular 2 when the property 'then' was not found on type 'Subscription'

I have been attempting to call a service from my login.ts file but I am encountering various errors. Here is the code snippet in question: login.ts import { Component } from '@angular/core'; import { Auth, User } from '@ionic/cloud-angular ...

angulartypescriptionic-frameworkionic2

Passing an object from an Angular application to a backend server in Node.js using the

I have a YAML file with the following structure: Layouts: - Name: Default Layout LayoutId : 1 ConfiguredSegments: LiveA : Height : 100 Id : LiveA Ref1A : ...

node.jsangularjsangularhttp

Reacting to the surprise of TS/JS async function behaving differently than anticipated

It appears that I'm facing a challenge with the small method; not sure if my brain is refusing to cooperate or what's going on. async fetchContacts() { await this.http.get('http://localhost:3000/contacts') .subscribe(res =& ...

javascripttypescriptasync-await

Component does not detect change when the same number is sent as input

Let me paint you a picture: I have this nifty component, set up with the OnPush strategy, that showcases a PDF document, sliding through pages one by one, and granting users the ability to smoothly glide through pages and jump to specific ones. It even of ...

javascriptangularangular-changedetectionngonchanges

Unable to bind click eventListener to dynamic HTML in Angular 12 module

I am facing an issue with click binding on dynamic HTML. I attempted using the setTimeout function, but the click event is not binding to the button. Additionally, I tried using template reference on the button and obtaining the value with @ViewChildren, h ...

javascriptnode.jsangular

Getting the PlayerId after a user subscribes in OneSignal with Ionic2

Currently working on an app with Ionic2 and facing a challenge with retrieving the player id after a user subscribes in order to store it in my database. Any suggestions on how I can retrieve the unique player id of OneSignal users post-subscription? ...

typescriptpush-notificationionic2onesignal

Steps for showing personalized validation error messages in Angular 7

Is there a way to highlight the input field of a form with a red border and display the message Password is invalid when a user types in a password that does not match the set password? I have managed to see the red border indicating an error when I enter ...

javascriptangular

Validating React Typescript Props: Ensuring that two specific props do not exist simultaneously

Currently, I'm developing a reusable component in React-Typescript and I am looking to validate my props OnClick and component as follows: Both onClick and component prop are optional. These props will only be passed to the component if they need to ...

reactjstypescripttypescript-typingsreact-typescript

Utilize Angular 5 to implement document uploads through a REST service call

I've been attempting to upload a document to our repository using Angular 5 and I'm encountering an error that I've included below. The Multipart/Form code is very similar to what worked in Angular 1.x, except for one line difference in the ...

angular

Tips for preventing Angular from requiring an additional tag for a child component

Consider a scenario where I have a parent and child component in Angular 12. Their templates are structured as follows: Parent: <h1>This is the parent component</h1> <div class="container"> <div class="row"> ...

angulartypescriptangular-componentsng-container

How to make an input blur in Angular 2 when a button is clicked?

Is there a way to blur an input field by pressing the return button on a mobile native keyboard? Here is an example: <input type="text" #search> this.search.blur() //-- unfocus and hide keyboard ...

javascriptangulartypescript

Angular 2/NPM: setting up a new directory with all the necessary files for running the application

I'm feeling a bit frustrated, but I'm giving it a shot anyway. Our goal is to create a TypeScript Angular 2 hello world app that we can use as the front end for a Spring app. Currently, we're using the Angular 2 quickstart as our foundation ...

angularnpm

Launch a component in a separate browser tab

I decided to open my component "template1" in a new tab, so I set up the path as follows: const routes: Routes = [ {path : 'template1' , component: Template1Component} ]; In the HTML file: <a mat-raised-button color="primary" target="_bl ...

angular

How to implement a Typescript interface without necessarily implementing the parent interfaces

Within my current project, I have defined the following interfaces: interface foo { fooProperty: number; fooFunction(): void; } interface bar extends foo { barProperty: string; barFunction(): void; } Now, I am interested in creating a class like ...

javascriptclassooptypescriptextends

Encountered CORS error when attempting to access the dynamic menu API after logging

Currently, I am working on an Angular 6 and Codeigniter project. In this project, the slider and navigation menu bar are being fetched dynamically through a REST API. Everything runs smoothly until the login process, where a CORS error is encountered. htt ...

phpangularrestapiangular6