Is there a way to access a route parameter that is two levels above in Angular 11?

I am seeking guidance on how to access second-level parent routes in Angular. For instance, how can I retrieve the componentId within the AttributeListComponent when using the following nested routes:

const routes: Routes = [
  {path: '', redirectTo: '/components', pathMatch: 'full'},
  {path: 'components', component: SideNavComponent,
    children: [
      {path: ':componentId', component: ComponentTabComponent, children: [
          {path: '', redirectTo: 'entities', pathMatch: 'full'},
          {path: 'entities', component: EntityListComponent, children: [
              {path: ':entityId', component: EntityTabComponent,
                children: [
                  {path: '', redirectTo: 'attributes', pathMatch: 'full'},
                  {path: 'attributes', component: AttributeListComponent},
                  {path: 'tasks', component: TaskListComponent}
                ]}
            ]},
          {path: 'domains', component: DomainListComponent}
        ]},
    ]},
  { path: '**', component: PageNotFoundComponent }
];

Answer №1

To navigate up the router tree, use the parent property. Here's an example:

  constructor(private router: ActivatedRoute) {}
  ...
  this.router.parent.parent.parent.queryParams.subscribe(...

Determine the number of parent elements you need yourself :). This depends on how many children are present in your routes file.

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

Adding a second interface to a Prop in Typescript React: a step-by-step guide

import { ReactNode, DetailedHTMLProps, FormHTMLAttributes } from "react"; import { FieldValues, SubmitHandler, useForm, UseFormReturn, } from "react-hook-form"; // I am looking to incorporate the DetailedHTMLProps<FormHTMLAt ...

Typescript: Exploring the Assignability of Numbers, Strings, and More to Null

Why does TypeScript display errors only when assigning a string to a number, but not when assigning null to a number? export type ArrayWithNumberOrString = Array<number | string>; export type ArrayWithNumberOrNull = Array<number | null>; f ...

Can someone show me how to handle a GET response in Angular 8?

I'm working on a .Net Core API that returns a response object with data and total pages. The data is an IEnumerable of orders, while the total pages is an integer value. var response = new { Data = data, ...

Limit the precision of decimal number output to a specific value

I need assistance with achieving the output 999999.35 in angular or javascript combined with html. I am looking to restrict the number of 9's to a maximum of 6 digits before the decimal point, and after 6 digits it should not accept any more digits. A ...

Having issues getting npm start to function properly with webpack in React

As I dive into self-teaching React and setting up my own framework, I encountered an issue after running npm start in the command line: ~/projects/reactApp » webpack --display-error-details Dustin@Dustins-MacBook-Pro Hash: 94c3df302d8dd2990ab8 Ve ...

Touch target for scrollbars

While developing the modal in HTML, I encountered an issue where keyboard-only users cannot access all content within the modal. I came across a note stating that the scrollbar touch target should be 44px by 44px. I tried reading this documentation https ...

An issue arising from code in Python, JavaScript, HTML, and CSS

I am currently studying JavaScript and Python and have encountered an issue with my code. I wrote a script that is supposed to create a file and input data into it, but the recv_data function is not functioning correctly - the file is not being created. Ca ...

What is the functionality of the 'em' CSS unit when used with positioned elements?

Here is an example of HTML code featuring nested div tags and a p tag as the innermost element: <!DOCTYPE html> <html> <head> <title>How em unit works?</title> <link href="style.css" rel="stylesheet" ty ...

The network tab is failing to display the CSS styles being applied to the selectors

Being new to markup languages, I encountered an issue when trying to apply my first CSS file to my index.html. Here is how I included the link tag in the HTML file for the CSS file: index.html code Upon checking the network tab in developer tools, I notic ...

The CSS style functions properly in Chrome, however, it is not compatible with Internet Explorer

I can't figure out why this particular style is functioning properly in Chrome, but not in IE and FF. #show{top:10%; position:relative; margin: 0px auto; width:100%;} [Edit] If I want to achieve the same result in IE and FF, what steps should I tak ...

Expand Tooltip on the Fly

Is there a way to make a tooltip expand horizontally instead of overflowing below the page? I have a tooltip that can be quite lengthy, and due to its max-width being set at 200px, it extends beyond the bottom edge of the page. I am currently able to set ...

Is it possible for Graphfana to utilize JSON data retrieved directly from a webpage?

My server generates a web page containing JSON data from an application that monitors temperature. I'm curious to find out if there's a possibility for Grafana to track and visualize this data on a dashboard. Appreciate your assistance! ...

Struggling to deploy my Laravel application with Tailwind CSS on the frontend. However, running "npm run dev" results in an error

While running the npm command `npm run dev` in cmd, I encountered an error stating that I require PostCSS v8 even though I already have PostCSS v8.3 installed. Could it be possible that Tailwind CSS specifically needs version 8 despite newer versions being ...

I'm struggling to concentrate and unable to type in the email field

Today while working on a website, I encountered something strange. In the footer section of the site, there is a quick contact form. However, I noticed that in Firefox, I am unable to focus on the email field. Surprisingly, this issue does not occur in Chr ...

Determine characteristics of object given to class constructor (typescript)

My current scenario involves the following code: abstract class A { obj; constructor(obj:{[index:string]:number}) { this.obj = obj; } } class B extends A { constructor() { super({i:0}) } method() { //I wan ...

Ways to extract information from a JSON array

Having trouble extracting the driverId from this JSON data. [data: [{"id":"619","driverId":"6789","starting_time":"2016-12-12 23:24:50","end_time":null}]] Below is my complete code: //selector Method SESSION_STATUS_REQUEST_COMPLETE func afterServiceStat ...

Is there a way to conceal/remove the text displayed on the submit button?

I am facing an issue with a submit button in my PHP code. The button displays an integer value that is crucial for running a script, but I want to hide the value as it interferes with the design using CSS. I have attempted various solutions like removing t ...

The module could not be loaded due to a prohibited MIME type ("application/json")

While working on my project, I incorporated Angular Universal and now I'm looking to deploy it in a Serverless environment on AWS. However, when I try running the app locally, I encounter the following error. I referred to the link below for guidance ...

Is it possible to retrieve information from Wikipedia using Ajax?

Does anybody know of a service or api that makes it possible to fetch Wikipedia data related to a specific topic using only JavaScript? ...

How to give a stylish touch to your :after element with a css

I have a unique bubble design that pops up when hovering. I'm trying to add a border around the bubble, but I'm facing difficulty adding a border to the pointer of the bubble. The arrow is created using the .bubble:after selector. You can check ...