angular 17 standalone use multiple components (two components as example)

Question

*self study html, i can deal with css and js, and i can use bootstrap.

*it's first time use front end frameworks.

*English my second language

Angular CLI: 17.3.3
Node: 20.11.1
Package Manager: npm 10.2.4

when i search find that angular 17 is components based.

1- i try build single page application that contain 5 pages, every page contain 5 or 6 different parts (paragraph, table, card, etc), all pages share same header and footer.

2- for simplicity, let's assume i try build SPA that contain:

  2-a. two pages
  2-b. every page contain two different paragraph, overall four paragraph
  2-c. share same header and footer

3- i learn how make the shared header and footer

4- i learn how make navbar work (router every tab to specific one component)

the problem: that i want create separate component for every paragraph. that will produce overall four components, two components for every page.

so how can i set router to show two different components (c1, c2 in first page and c3, c4 in second page) in one page?

Answer 1

You can create a wrapper component, that contains these two components and set that in routing. The component is just a dummy class required by routing to show the component, please go through the below working example and let me know if any doubts!

import { Component } from '@angular/core';
import { RouterModule, provideRouter } from '@angular/router';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { OneComponent } from './app/one/one.component';
import { TwoComponent } from './app/two/two.component';
import { ThreeComponent } from './app/three/three.component';
import { FourComponent } from './app/four/four.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterModule],
  template: `
    <a [routerLink]="['group1']">group 1 </a> | 
    <a [routerLink]="['group2']">group 2 </a>
    <br/>
    <router-outlet/>
  `,
})
export class App {
  name = 'Angular';
}

@Component({
  selector: 'wrapper1',
  standalone: true,
  imports: [OneComponent, TwoComponent],
  template: `
    <app-one/>
    <app-two/>
  `,
})
export class WrapperComponent {
  name = 'Angular';
}

@Component({
  selector: 'wrapper2',
  standalone: true,
  imports: [ThreeComponent, FourComponent],
  template: `
    <app-three/>
    <app-four/>
  `,
})
export class Wrapper2Component {
  name = 'Angular';
}

bootstrapApplication(App, {
  providers: [
    provideRouter([
      {
        path: 'group1',
        component: WrapperComponent,
      },
      {
        path: 'group2',
        component: Wrapper2Component,
      },
      {
        path: '**',
        redirectTo: 'group1',
        pathMatch: 'full',
      },
    ]),
  ],
});

Stackblitz Demo