Ionic inline popover and routerLink (Angular)

Ionic Framework Ionic Angular
1

Ionic v.6.

I am new to angular and ionic and want to use ionic popover to create the menu. Unfortunately using the inline ionic popover (ion-popover) I get following problem. After clicking on the link in the popover and navigating using the routerLink from Angular the popover stops triggering upon clicking on the trigger button. Could someone explain me why it is so and how to fix it.

header.component.html:

<ion-header>
  <ion-toolbar class="ion-padding-horizontal small-padding-vertical">
    <div class="header-wrapper">
      <div class="logo-wrapper">
      <ion-img class="logo" [src]="logoUrl"></ion-img>
      Herzlich Willkommen Max Mustermann!
      </div>
      <div (click)="toggle()"  id="trigger-button">
       <ion-icon class="ion-padding-top" color="black" [name]="visible ? 'menu-sharp' : 'close-sharp'"></ion-icon>
      </div>
      <ion-popover id="menu-popover" trigger="trigger-button" (didDismiss)="toggle()" mode="md" [dismissOnSelect]="true">
        <ng-template>
          <ion-list id="menu-list" lines="none" class="ion-padding-horizontal">
            <ion-item *ngFor="let page of appPages;" routerDirection="root" [routerLink]="[page.url]" detail="false">{{page.title}}
               <ion-icon slot="end" name="chevron-forward-sharp"></ion-icon>
            </ion-item>
          </ion-list>
        </ng-template>
      </ion-popover>
    </div>
  </ion-toolbar>
</ion-header>

header.component.ts

import {Component, Input, OnInit} from '@angular/core';
import {environment} from '@environments/environment';
import {ApiService} from '@services/api.service';
import {ActivatedRoute, Router} from '@angular/router';


@Component({
    selector: 'app-header',
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.scss'],
})
export class HeaderComponent implements OnInit {
    avagLogoSrc = environment.avagLogoSrc;
    logoUrl: string;
    visible = true;

    public appPages = [
        { title: 'Home', url: '/home'},
        //todo add login url
        { title: 'Login', url: '#'},
        { title: 'Impressum', url:'/legal-notice'},

    ];


    constructor(private apiService: ApiService, public router: Router, private activatedRoute: ActivatedRoute) {
    }

    ngOnInit() {
        //todo Remove method later
        this.apiService.getCarDealerWithAllTypeOfNews(1).subscribe(response => {
            this.logoUrl = response.logo;
        });


    }

    /**
     * This function changes the value of the "visible" variable from true to false and back on every click on the menu icon in header
     */
    toggle() {
        this.visible = !this.visible;     
    }
}