Leverage the power of Angular 17 by implementing standalone functionality through the utilization of multiple components

Question

Leverage the power of Angular 17 by implementing standalone functionality through the utilization of multiple components

As someone who is currently self-studying HTML and proficient in CSS and JS, with the ability to use Bootstrap, I am venturing into using front-end frameworks for the first time. English is my second language.

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

Upon researching, I discovered that Angular 17 is components based.

My objective is to build a single-page application consisting of 5 pages. Each page will have 5 or 6 different parts such as paragraphs, tables, cards, etc., all sharing the same header and footer.

To simplify, let's say I plan to create an SPA with:

  2-a. two pages
  2-b. each page containing two different paragraphs - totaling four paragraphs
  2-c. shared header and footer

I have learned how to create the shared header and footer, as well as how to make the navbar functional by routing each tab to a specific component.

The issue at hand: I aim to create separate components for each paragraph, resulting in a total of four components (two for each page).

How can I configure the router to display two different components (c1, c2 on the first page, and c3, c4 on the second page) within one page?

angular typescript xcode entity-framework components

Answer 1

Answer №1

If you want to group two components together and display them using routing in Angular, you can create a wrapper component that contains these two components. The wrapper component is necessary for routing purposes. Take a look at the following example code to see how this can be achieved:

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',
      },
    ]),
  ],
});

Check out the StackBlitz Demo to see it in action!

Answer 2

If you want to group two components together and display them using routing in Angular, you can create a wrapper component that contains these two components. The wrapper component is necessary for routing purposes. Take a look at the following example code to see how this can be achieved:

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',
      },
    ]),
  ],
});

Check out the StackBlitz Demo to see it in action!

Leverage the power of Angular 17 by implementing standalone functionality through the utilization of multiple components

Answer №1

Similar questions

Retrieve a specified number of child elements

Angular 2: The Power of Import Statements

Displaying Local Storage Data in Primeng Dropdown

Using Froala events in Angular 2: A guide

Angular 5 - Issue with ngModel not binding correctly to tinymce editor

Is there a way to check if a date of birth is valid using Regular Expression (RegExp) within a react form?

Guide to verifying a value within a JSON object in Ionic 2

Having trouble with implementing a custom hook in React using Typescript?

Converting JSON objects into TypeScript classes: A step-by-step guide

Can you provide a guide on setting up and utilizing mathlive within NuxtJS?

Creating an Angular component to display a dynamic table using ngFor directive for a nested JSON data structure

What is the reason behind TypeScript failing to provide type safety in a generic higher order component which introduces extra properties into React components?

Can you point me to the definition of pausesLocationUpdatesAutomatically in Swift 5?

Pause and anticipate the occurrence of AdMob's complimentary video reward event within a defined function in Ionic/Typescript

Incorporate a script into your Angular-CLI project

how to navigate to a different page programmatically upon selecting an option in the side menu

Having trouble uploading big files on your Windows system?

A guide on determining the return type of an overloaded function in TypeScript

Is it acceptable to include a @types library as a regular dependency in the package.json file of a Typescript library?

Angular components can be modified and concealed