I have set up a collection in Strapi called Pages and I am looking to display them in the same component using my Navigation Bar Component. However, I am unsure of how to achieve this.

Currently, all the data from the Collection is being displayed like this: https://i.sstatic.net/hTh21.png

My question is, how can I render a specific Page using the navigation bar? For example, when I click on "Ratenrechner," only the content related to "Ratenrechner" should be shown.

The reason for rendering in the same component is because all these pages share the same structure.

I will provide my components and services code below. Please let me know if you need more information or code to assist with this issue. I will try to keep it concise and include all necessary details.

app.routing.module.ts

const routes: Routes = [
  {
    path: '',
    redirectTo: 'page',
    pathMatch: 'full'
  },
  {
    path: 'page',
    component: PageComponent,
  }
]; 

page.service.ts

export class PageService {

  constructor(private http: HttpClient) { }

  getAllPages(): Observable<Page> {
    return this.http.get<Page>(`${environment.apiUrl}/pages`).pipe(map(res => res));
  }

  getPage(pageID: any):Observable<Page> {
    return this.http.get<Page>(`${environment.apiUrl}/pages/${pageID}`).pipe(map(res => res));
  }

page.component.ts

export class PageComponent implements OnInit {
  pages?: Page;

  constructor(private pageSvc: PageService, private route: ActivatedRoute) {
  }

  ngOnInit(): void {
  this.getPages();
  }

  getPages() {
    this.pageSvc.getAllPages().subscribe(res => {
      this.pages = res;
    })
  }
}

page.component.html

<div *ngIf="pages">
  <div *ngFor="let pageData of pages.data">
    <h1>{{pageData.id}} - {{pageData.attributes.title}}</h1>
  </div>
</div>

My navigation bar has also been created with Strapi as a Content Type containing a Collection for the dropdown menu and links component;

navigation-bar.service

export class NavigationBarService {

  constructor(private http: HttpClient) {
  }
  // function to get all data response from top-left-menu in strapi
  getAllNavbarComponents(): Observable<Navbar> {
    return this.http.get<Navbar>(`${environment.apiUrl}/top-left-menu?[populate]=*`).pipe(map(res => res));
  }
}

navigation-bar-dropdown.service.ts

export class NavigationBarDropdownService {

  constructor(private http: HttpClient) { }

  getAllDropdownComponents(): Observable<Dropdown> {
    return this.http.get<Dropdown>(`${environment.apiUrl}/sections?[populate]=*`).pipe(map(res => res));
  }

}

navigation-bar.component.ts

export class NavigationBarComponent implements OnInit {

  components?: Navbar;
  dropdownComponents?: Dropdown;

  constructor(private navbarSvc: NavigationBarService, private dropdownSvc: NavigationBarDropdownService) {
  }

  ngOnInit(): void {
    this.getNavbarComponents();
    this.getDropdownComponents();
  }

  getNavbarComponents() {
    this.navbarSvc.getAllNavbarComponents().subscribe(res => {
      this.components = res;
    })
  }

  getDropdownComponents() {
    this.dropdownSvc.getAllDropdownComponents().subscribe(res => {
      this.dropdownComponents = res;
    })
  }

}

navigation-bar.component.html

<ng-container *ngIf="components">

  <nav class="navbar navbar-expand-lg bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
              aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse " id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
               aria-expanded="false">
              Ratgeber
            </a>
            <ng-container *ngIf="dropdownComponents">
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <div class="row row-cols-auto">

                  <div class="col" *ngFor="let dropdownComponent of dropdownComponents.data">
                    <!--            SECTION LABEL-->
                    <li
                      class="text-center my-2 fw-bold"
                    >
                      {{dropdownComponent.attributes.label}}
                    </li>
                    <!--            SECTION LINKS-->
                    <li
                      *ngFor="let link of dropdownComponent.attributes.links"
                    >
                      <a href="{{link.url}}">{{link.label}}</a>
                    </li>
                    <li>
                      <hr class="dropdown-divider">
                    </li>
                  </div>
                </div>
              </ul>
            </ng-container>
          </li>
          <li class="nav-item" *ngFor="let sectionComponent  of components.data.attributes.body">
                <a class="nav-link" href="{{sectionComponent.url}}">{{sectionComponent.label}}</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</ng-container>