Angular router for displaying multiple view groups

What is the most effective strategy for handling two groups of views in Angular? Let me explain how I typically structure my layout in app.component.html:

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

This setup results in both the app-header and the app-footer being displayed on every page.

However, what if I need to display another set of views, like an intranet setup shown in this image:

https://i.sstatic.net/m1ErO.jpg How would I go about implementing this?

For instance, considering my current configuration, how can I place the queHacemosAdminComponent in a separate group of views?

const routes: Routes = [
{ path: '', component: InicioComponent },
{ path: 'queHacemos', component: QueHacemosComponent },
{ path: 'contacto', component: ContactoComponent },
{ path: 'queHacemosAdmin', component: QueHacemosAdminComponent }
]

angulartypescriptroutes

Answer №1

To achieve the desired outcome, simply add another layer of routing:

const routes = [
  { 
    path: '', 
    component: Group1Component // includes header1, footer1 and router-outlet
    children: [
      { path: '', component: HomeComponent },
      { path: 'whatWeDo', component: WhatWeDoComponent },
      { path: 'contactUs', component: ContactUsComponent }
    ]
  },
  { 
    path: '', 
    component: Group2Component // includes header2, footer2 and router-outlet
    children: [
      { path: 'adminWhatWeDo', component: AdminWhatWeDoComponent }
    ]
  }
];

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

There was an issue with compiling the template in the module. It was unable to locate the component in relation to the [

I have organized my project folder structure as follows: https://i.sstatic.net/SbZMl.png Inside the cable folder, there is a component path defined as: /folder1/folder2/dialogs/changes-dialog/details-wizard/add-packages/new-package-definition/package-sel ...

angulardockernpmdockerfiledevops

Issue encountered while combining TypeScript interface function declarations (Interface Merging)

interface Cat { meow(words: string): string; } interface Cat { meow(num: number): number; } const cat: Cat = { meow(wordsOrNum): string | number { return wordsOrNum; } } In the example code above, interfaces demonstrate how decla ...

typescript

Enhance your Angular2+ writing skills by delving into the intricacies of subscriptions with `

Seeking assistance to enhance the code structure. I am struggling with understanding switchMap, mergeMap and how to avoid nested subscriptions. this.service .service1('something') .pipe(takeUntil(this.unsubscribe)) .subscribe( (s1result ...

angularrxjs

Ways to create a unified component from two similar but distinct components by assigning a value

Upon reviewing my menu setup, I realized that the submenus in my project are essentially the same component with only a single index differentiating them. In order to simplify the structure, I am looking to consolidate these components into one. HTML < ...

angular

What is the importance of moving prop types into a type or interface in React components?

Consider the scenario where I have a functional component: const MyText = ({ value }) => ( <div className="my-fancy-text">{value}</div> ); Now, when utilizing Typescript, I face the need to introduce typing. A straightforward ...

reactjstypescript

Encountering challenges while transitioning from ngrx version 2 to version 4, specifically related to typing in array de-structuring

The error indicates a missing comma after the action parameter in the .map. Another error pops up when hovering over DataActions.AddDataAction, displaying Tuple type '[Action, AppStore]' with length '2' cannot be assigned to tuple with ...

angulartypescriptngrxngrx-effectsngrx-store-4.0

Exploring Rxjs repeatwhen with a delay in action

I'm struggling to understand how repeatWhen and delay() work together. If you want to see my issue in action, click on this link and make sure to open the console. I tried using takeWhile to stop the repeatWhen stream before it gets to the delay ope ...

angularrxjs

Angular design featuring numerical staircase pattern

I'm attempting to implement a numeric version of the staircase pattern using Angular, but I have yet to find the solution. Here is the desired outcome: https://i.sstatic.net/KTU3k.png Below is the code I have developed thus far: main.ts import { Co ...

angular

Angular 4 Bootstrap 4 Collapsible Navigation Bar

Struggling for a while now trying to achieve the exact functionality I desire. Within my Angular Universal App, there is a vertical navigation bar at the top that I want to make responsive for mobile devices. I am utilizing Bootstrap 4 Alpha 6 and ngx-boot ...

angularnavbootstrap-4

When employing CDK to configure an SNS topic Policy Statement with actions limited to ["sns:*"], the CloudFormation output may display a warning message stating "Policy statement action is not within the service scope."

Encountering an issue when attempting to reference all SNS actions with * in CDK. const MyTopicPolicy = new sns.TopicPolicy(this, 'MyTopicSNSPolicy', { topics: [MyTopic], }); MyTopicPolicy.document.a ...

typescriptamazon-web-servicesamazon-snsaws-cdk

`Troubleshooting problem with debugging mocha tests in a TypeScript environment`

I'm currently facing an issue while trying to debug a mocha test. Despite my efforts in searching on Google and Stack Overflow, I have not been able to find a solution. The error message is as follows: TSError: ⨯ Unable to compile TypeScript: sour ...

typescriptdebuggingvisual-studio-codemocha.js

An error has occurred: module @angular-devkit/build-angular/package.json could not be located

Whenever I try to run my project on VS Code, which has been working fine for others, I encounter this strange error that is beyond my understanding. Here is the screenshot of the error message: https://i.sstatic.net/xUBsZ.png It seems like there might be ...

node.jsjsonangularhelper

After making a RESTful call, the ngModel in Angular 2 does not reflect the

I'm experiencing an issue with my user component where it fails to update the form after making a restful call to retrieve user data. Even though the data is being fetched correctly and mapped to the model, the form does not reflect these changes. Th ...

angularngmodel

Manipulating arrays of objects using JavaScript

I am working with an array of objects represented as follows. data: [ {col: ['amb', 1, 2],} , {col: ['bfg', 3, 4], },] My goal is to transform this data into an array of arrays like the one shown below. [ [{a: 'amb',b: [1], c ...

javascripttypescript

Adjust cursor location in a provided OnTypeFormattingEdits with Monaco Editor

I've implemented the following code to automatically close an XML tag when typing the '>' of an opening tag. Everything is working smoothly so far, however, I am trying to position the cursor between the tags instead of at the end of the ...

typescriptmonaco-editor

AngularJS attempted to open $modal, but it encountered an error because the controller named <controllername> was not registered

Currently, I am in the process of enhancing a web application that was originally developed using AngularJS with typescript instead of JS. I have a controller set up with a specific template that I want to display in a modal using $modal.open. However, I ...

angularjstypescript

What is the best way to ensure that multiple queries are returned in the correct sequence?

In the interface below, there is a search input box along with data displayed. As you type in the search input, the data below filters accordingly. Each letter typed triggers a request to retrieve the relevant data. For instance, if you type "folder," the ...

reactjstypescriptasynchronousrequest

Ensuring that a TypeORM column has been updated

Currently, I am utilizing TypeORM with the ActiveRecord design pattern and have created this entity: @Entity() export class User { @PrimaryGeneratedColumn() public id: number; @Column() public username: string; @Column() public password: stri ...

node.jstypescriptsqliteexpresstypeorm

A custom Typescript type for immutable values within an object

I am struggling with finding the right data type for my function, where I need to work with static types. I have experimented with Type, interface, class, Record, and others, but none seem to fit perfectly. GEOLOCATIONS is a constant record that maps cou ...

typescripttypes

I recently installed Angular version 12, but another unexpected version 13 was also installed simultaneously. I only wanted version 12, so now I need to figure out how to uninstall

C:\Users\eaind>npm install -g @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="96f5faffd6a7a4b8a6b8a4">[email protected]</a> Upon installing version 12 in the directory C:\Users\eaind&bso ...

angularnpm