Dynamically add Popover to element onInit

@kodis wrote:

Just wondering if there is any way to trigger a Popover on view init?

Basically it’s a tour functionality, so the first time a user goes to a screen the popover will automatically be displayed on a button. I was able to get it to automatically show a popover with the following code but it doesn’t get attached to the element, it just displays it in the middle of the screen.

preview.ts

// Import modules
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { NavController, ToastController, PopoverController } from '@ionic/angular';
import { PopoverSimpleComponent } from '../../components/popover-simple/popover-simple.component';

@Component({
	selector: 'app-preview',
	templateUrl: './preview.page.html',
	styleUrls: ['./preview.page.scss'],
})
export class ProgramPage implements OnInit {
	@ViewChild('addButton', { read: ElementRef, static: false}) addButton: ElementRef;

	constructor(
		public navCtrl: NavController,
		public toastCtrl: ToastController,
		public popoverCtrl: PopoverController
	) {
	}

	async ngOnInit() {
		this.presentPopover(this.addButton.nativeElement, 'Text instructions');
	}
}

preview.html (relevant component only)

<ion-button #addButton class="b-add-to-library" color="primary" size="small" (click)="addToLibrary($event)">
	<ion-icon name="add"></ion-icon>
	<ion-label>Add to Library</ion-label>
</ion-button>

Cheers!

Posts: 1

Participants: 1

Read full topic