Utilize multiple activated modules in Angular 2

Recently, I've been exploring the new features of Angular 2 final release, particularly the updated router functionality.

An interesting example showcasing the router in action can be found at this link: http://plnkr.co/edit/mXSjnUtN7CM6ZqtOicE2?p=preview

I'm curious to know if there is a way to keep the current module visible but hidden in the DOM while loading a new one on top. Consider a situation where a user is navigating from an Admin-type module to create some asset (like a user) in a Users module, and then returning to where they left off in the Admin module.

In this specific case, the user might be working within a deep-linked section of the Admin module, so it would be disruptive for them to lose their progress when switching modules.

Is there a solution for this requirement? From my experience so far, it seems like the modules loaded in the <router-outlet> are removed completely from the DOM once a new module is loaded.

Thank you!

angulartypescriptdomangular2-routing

Answer №1

At the moment, components added by the router are removed when the route changes. There are plans to make this behavior customizable in the future.

If you store data (model) in shared services that persist rather than in the component itself, users will see the original view when they navigate back to a previous route.

The services must be provided on a component that remains unaffected by the router. This could be the root component or providers within an @NgModule() that is not lazy-loaded.

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

Incorrect types being identified

What is the reason behind the callback assuming the type string | number | boolean instead of determining the exact type based on the property passed as the first argument in the carWithListener.on function? const car = { paint: "red", ...

typescript

Transferring information between two components in separate Angular 4 modules

Within my application, I have defined two modules named AppModule and UserModule. I am currently encountering an issue with data sharing between the AppComponent and the LoginComponent (which belongs to the UserModule). Below is a snippet of app.componen ...

javascriptangulartypescriptrxjs

The combination of Node.js, Express router, and TypeScript is causing an issue where a string argument is not compatible with the request

I'm currently working on a tutorial to develop a comprehensive REST API. In the process, I've created a TypeScript class that exports a new Express router: import { Router, Request, Response, NextFunction } from 'express'; export clas ...

node.jstypescriptexpress

Leverage the power of Material UI makeStyles in conjunction with Typescript

In an effort to keep things organized, I've created a specific file for the classes prop, such as MuiAlert. Is there a way to specify to makeStyles that only Alert classes should be used? The current method works, but I'm sure there's a mo ...

reactjstypescriptmaterial-uimaterial-designtypescript-typings

Encountering a TypeScript Error when trying to customize the MUI color palette

I'm attempting to incorporate a custom color in MUI v5 using TypeScript, but I keep receiving the error: Type '"my_custom_color"' is not allowed for type '"primary" | "inherit" | "secondary" | "success" | "error" | "info" | "warning" ...

reactjstypescriptmaterial-ui

Check to see if the validator control contains the mandatory attribute

I'm working on a unique form validation directive for custom templates. Is there a way to check if the control has a required attribute? ...

angular

Exploring innerHTML in JavaScript for event listening

Two code snippets were tested, one worked as expected while the other didn't produce the desired result. The goal was to display a different text every time a user clicked on a button. However, the unsuccessful code always displayed err, with no chang ...

javascriptdomerror-handlingaddeventlistenerinnerhtml

Issue with ellipsis not functioning correctly on dynamic placeholders when they are in focus

When I focus on my dynamic placeholder input, the text-overflow: ellipsis property is lost for some reason. However, it is regained when blurred. Can anyone explain why this is happening? If you want to experiment with it, I have set up a stackblitz: htt ...

htmlcssangular

Having trouble getting errors to display on the Input onChange event with Antd

When using Antd, I am having trouble getting errors in the onChange event. Even when there is an error in a field, I cannot see the errors while typing in that particular field. For example; https://stackblitz.com/edit/react-qurm1n?file=demo.tsx Here are ...

reactjsangularreact-nativenext.jsantd

Utilize dynamically generated form fields to upload multiple files at once

Currently, as I delve into learning the MEAN stack, I am encountering difficulties with file uploads. Specifically, within a company form: this.companyForm = this.fb.group({ trucks: this.fb.array([]), ... }); The 'trucks' field i ...

javascriptnode.jsangularmean-stack

I am unable to modify values using ngModel

I am struggling to update the value in my service.year.ts file but it seems impossible... <select name="selectedyear" [disabled]="disabledPeriod" [(ngModel)]="selectedyear" (ngModelChange)="onChangeYear()"> <option [ngValue]="selectedyear" ...

angular

Submitting a form using an anchor tag in Angular 8: A step-by-step guide

I have a question about how to submit form data using hidden input fields when a user clicks on an <a> tag. <form action="/submit/form/link"> <input type="hidden" [attr.value]="orderNumber.id" /> <input type="hidden" [attr.value]= ...

javascriptangulartypescriptformssubmit

Leverage the useRef hook with React Draggable functionality

Having recently delved into coding, I find myself navigating the world of Typescript and React for the first time. My current challenge involves creating a draggable modal in React that adjusts its boundaries upon window resize to ensure it always stays wi ...

reactjstypescriptdraggableuse-ref

The feature of "compile on save" is not functioning properly in my current Angular project

Yesterday I used the angular cli (ng new my-app) to create a new project, but unfortunately the "compile on save" option is not functioning properly. Interestingly, I have two projects on my computer and this feature works fine for one of them but not for ...

angulartypescript

Assign custom keys to request object parameters before reaching the controller in the map

I have a Loopback 4 application where the request object's property keys are in snake_case and they correspond to our database column names which are in StudlyCase. What I want is to change the application property names to camelCase. This means that ...

node.jstypescriptexpressloopbackjs

Karma error `An unhandled exception occurred: Cannot locate module ‘karma’` is encountered during Jest Angular testing

Looking to implement Jest testing in my Angular project, I have followed all the setup instructions provided here. Here is an excerpt from my package.json: { "name": "jest-test", "version": "0.0.0", ... } Additionally, here ...

angularunit-testingjestjsts-jest

Specialized Character Formats in TypeScript

In my quest to enhance the clarity in distinguishing different types of strings within my program - such as absolute paths and relative paths, I am seeking a solution that ensures functions can only take or return specific types without errors. Consider t ...

typestypescript

Angular causing issues with Perfect Scrollbar functionality

In an attempt to enhance the scrollbar in my Angular application, I integrated the following library: https://github.com/zefoy/ngx-perfect-scrollbar Following the guidelines provided in the documentation from the link, I included imports into my app.modul ...

angularperfect-scrollbar

The state may be modified, but the component remains unchanged

I've been tasked with implementing a feature on a specific website. The website has a function for asynchronously retrieving data (tickets), and I need to add a sorting option. The sorting process occurs on the server side, and when a user clicks a s ...

javascriptreactjstypescript

Error: Class cannot be loaded by React Webpack loader

I'm encountering an issue with my two typescript packages - a React application and an infrastructure package. The React app has a dependency on the infrastructure package (currently linked via npm). After adding a new class to the infrastructure pack ...

javascriptreactjstypescriptwebpackbabeljs