How to render different Pages(Strapi Collection) on same Angular Component with help of navigation menu?

Issue

I have created collection in Strapi called Pages i want to render them in a same component using my Navigation Bar Component but i don't know how to accomplish it.

What I'm actually getting is all the data from Collection displayed like this.

My question is how to render specific Page using navigation bar like seen above ,when i click "Ratenrechner" it should only show the "Ratenrechner".

The purpose of rendering it in a same component is because all of this pages have the same structure.

I will post my components and services code. Please let me know if u need more information or code to help me with this Problem. I'll try to keep it short and provide all the information needed.

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 is also created with Strapi its a Content Type including Collection for dropdown menu and Component for a links;

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

Solution

I wanna post an answer to my Problem, maybe someone will encounter the same problem in a future. I'm not sure it is a correct way but it's working for now.

This video helped me: https://www.youtube.com/watch?v=JT3s9HQxc1c

Please let me know if someone have better solution to this problem.

I used ActivatedRoute to get my current url and i've wrote a function to GET one page by ID and I'm giving my ID from current Route as param to my function.

page.component.ts

export class PageComponent implements OnInit {
  page?: Page;
  pageID?:  {id: number;};
  constructor(private pageSvc: PageService,private route: ActivatedRoute) {
  }

  ngOnInit(): void {
  this.pageID =  {
    id: this.route.snapshot.params['id']
  }
    this.getSpecificPage(this.pageID.id);
    // this.getPages();
  }

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

  getSpecificPage(id: any) {
    return this.pageSvc.getPage(id).subscribe( res => {
      this.page = res;
      console.log(this.page)
    })
  }
}

app.routing.module.ts

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

Answered By - Bartheus