Documentation or examples for component property on ion-popover-controller

Ionic Framework
1

I am trying to create a service method that renders a simple popover based on a list of possible string values, based on the popover sample provided in the documentation. In my method, I am creating a custom element this way:

customElements.define('ui-service-popover', class ModalContent extends HTMLElement {
  connectedCallback() { this.innerHTML = html; }
});

Where “html” is a string variable containing the list of options to be displayed. When I try to run this, I get an error indicating a provider for “ui-service-popover” does not exist.

Despite of that, I don’t think creating a custom element is the way to fo for me in this situation, since the element it self would change every time the method is called with a new set of options, so I wanted to explore other possibilities.

The Ionic documentation for app-popover-controller states that the component property on the create method accepts Function | HTMLElement | null | string values, but I haven’t be able to find any doc or example of how to pass other values than HTMLElement.

Any help here would be appreciated.

2

Did you imported your Service / Providers in your app.module.ts? Maybe you can try to generate your Service / Provider via ionic generate.

The Code of your Service / Provider would be helpful.

Hope it helps.

Cheers
Unkn0wn0x

3

UIService has generated using:

ionic g service services/ui

This service has methods to handle toast, alerts, inputs, etc… is just with the popovers that I am having problems, because it requires a component that I need to create on-the-fly. I know I could create a page with the popover options, but the idea is to be able to build the options list dynamically.

Any way, here goes some related code:

app,module.ts

// Configuraciones generales del modulo
const APP_DECLARATIONS = [
  AppComponent,
  AboutPage
];

const APP_ENTRY_COMPONENTS = [
  AboutPage,   // IMPORTANTE para el ModalController
];

const APP_IMPORTS = [
  BrowserModule, 
  IonicModule.forRoot(), 
  IonicStorageModule.forRoot(),
  AppRoutingModule,
  ComponentsModule,
  FormsModule,
  HttpClientModule
];

const APP_PROVIDERS = [
  StatusBar,
  SplashScreen,
  BarcodeScanner,
  Camera,
  File,
  WebView,
  FilePath,
  { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
];


@NgModule({
  declarations: [APP_DECLARATIONS],
  entryComponents: [APP_ENTRY_COMPONENTS],
  imports: [APP_IMPORTS],
  providers: [APP_PROVIDERS],
  bootstrap: [AppComponent]
})
export class AppModule {

} // AppModule

ui.service.ts
I am currently using customElements, because that was the example I found onlne, but I now realize that this s not gping to work for me because the element would need to be created every time I call this method, so I need another way to pass a valid value to the component property on the popover create method.

import { Injectable } from '@angular/core';
import { ActionSheetController, ToastController, AlertController, PickerController, LoadingController, PopoverController } from '@ionic/angular';

@Injectable({
  providedIn: 'root'
})
export class UIService {

  loader: any;   // Reference al loading actual
  popover: any;  // Reference al popover actual

constructor(
  	private actionSheetController: ActionSheetController,
  	private toastController: ToastController,
  	private alertController: AlertController,
  	private pickerController: PickerController,
  	private loadingController: LoadingController,
  	private popoverController: PopoverController
  ) { 
  	this.loader = null;
  	this.popover = null;
  }

 ....

 presentPopover(ev, options) {  	
  	return new Promise((resolve, reject) => {
  		let html = "<ion-list>";
  		for (let option of options)
  			html += '<ion-item button>' + option + '</ion-item>';
  		html += "</ion-list><ion-button expand='block' onClick='dismissPopover();'>Cerrar</ion-button>";

		function dismissPopover() {
      		if (this.popover) {
        		this.popover
        		    .dismiss()
        		    .then(() => {         		    	
        		    	this.popover = null; 
        		    });
      		}
    	}  		

		customElements.define('ui-service-popover', class ModalContent extends HTMLElement {
		  constructor() {
          	super();
          }
	      connectedCallback() {
	        this.innerHTML = html;
	      }
	    });  		

	    this.popoverController
	        .create({
	        	component: 'ui-service-popover',
	        	event: ev,
	        	translucent: true
	      	})
	      	.then(popover => {
	      		this.popover = popover;
	      		popover.present();
	      		resolve(popover);
	      	})

  	});
  } // presentPopover

uiservice.page.ts
This is a test page to show how to use all methods exposed on UIService

import { Component, OnInit } from '@angular/core';
import { UIService } from '../../services/ui.service';

@Component({
  selector: 'app-uiservice',
  templateUrl: './uiservice.page.html',
  styleUrls: ['./uiservice.page.scss'],
})
export class UIServicePage implements OnInit {

  constructor(
  	private ui: UIService
  ) { }

  testPopover(source) {
    this.ui
        .presentPopover(source, ["Peras","Manzanas","Platanos"])
        .then(() => { console.log("Popover salio"); })
        .catch(err => { console.log(err); });
  }

uiservice.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>uiservice</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>								
   <ion-button (click)="testPopover();">
     Test Popover
  </ion-button>			
</ion-content>

uiservice.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { UIServicePage } from './uiservice.page';

const routes: Routes = [
  {
    path: '',
    component: UIServicePage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [UIServicePage]
})
export class UIServicePageModule {}