I have two popover in the header
My first popover it open the correct place (event), but when the second popover open in the center
header.component.html
<ion-header id="main-content">
<ion-toolbar style="--background: #f26721;">
<ion-buttons slot="start">
<ion-menu-button style="--color: white"></ion-menu-button>
</ion-buttons>
<ion-button slot="end" (click)="presentPopoverProfile($event)" color="none" class="button">
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-popover #popover [isOpen]="isOpenProfile" (didDismiss)="isOpenProfile = false"> <!-- largura do popover definida no scss -->
<ng-template>
<ion-content class="ion-padding" (click)="showProfile()">Conta</ion-content>
<ion-content class="ion-padding" (click)="logout()">Sair</ion-content>
</ng-template>
</ion-popover>
<ion-button slot="end" (click)="presentPopoverNotification($event)" color="none">
<ion-icon name="notifications-outline"></ion-icon>
</ion-button>
<ion-popover #popover [isOpen]="isOpenNotification" (didDismiss)="isOpenNotification = false"> <!-- largura do popover definida no scss -->
<ng-template>
<ion-content class="ion-padding">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, dignissimos!</ion-content>
</ng-template>
</ion-popover>
</ion-toolbar>
</ion-header>
header.component.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { NavController, PopoverController } from '@ionic/angular';
import { AuthService } from 'src/app/core/services/auth/auth.service';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss'],
})
export class HeaderComponent implements OnInit {
constructor(
private navCtrl: NavController,
private router: Router,
private authService: AuthService,
private popoverController: PopoverController
) {}
@ViewChild('popover') popover:any;
isOpenProfile = false;
isOpenNotification = false;
ngOnInit() {}
presentPopoverProfile(e: Event) {
this.popover.event = e;
this.isOpenProfile = true;
}
presentPopoverNotification(e: Event) {
this.popover.event = e;
this.isOpenNotification = true;
}
}