The objective of this angular component is to create several coach marks with ion-popovers. https://stackblitz.com/edit/coach-marks-with-popovers

app.module.ts

import { PopoverModule } from './components/popover/popover.module';

@NgModule({
    imports: [
      ...
      PopoverModule
      ...
    ]

my-page.ts

import { PopoverService, PopoverClass} from './components/popover/popover.service';

@Component({
  ...
})
export class MyPage{
   ...

  //Popovers
  @ViewChildren('component-to-popver1', {read: ElementRef}) componentToPopover1: QueryList<ElementRef>; //Is a ViewChild because this component is included in a list
  @ViewChild('component-to-popver2', {read: ElementRef}) componentToPopover2: ElementRef;
  ...

  constructor(
    //Popovers
    private PopoverService: PopoverService
  ) {
  }
  
  ionViewWillEnter() {
    //Popovers init
    this.PopoverService.add(new PopoverClass(this.componentToPopover1.first.nativeElement, "Hello"));
    this.PopoverService.add(new PopoverClass(this.componentToPopover2.nativeElement, "World"));
    ...
    this.PopoverService.showCurrentPopover();
  }
}

popover-module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { PopoverComponent } from './popover.component';

@NgModule({
  declarations: [PopoverComponent],
  entryComponents: [PopoverComponent],
  imports: [
    CommonModule,
    FormsModule,
    IonicModule.forRoot()
  ],
  exports: [PopoverComponent]
})
export class PopoverModule { }

popover.component.html

<ion-grid>
  <ion-row>
    <ion-col>
      <ion-icon name="close-circle-outline" color="danger" aria-label="close circle" (click)="close()" style="float:right;zoom:1;"></ion-icon>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <p>{{text}}</p>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-button mode="ios" (click)="next()" *ngIf="!isTheLast">
        Next
      </ion-button>
    </ion-col>
  </ion-row>
</ion-grid>

popover.component.ts

import { Component } from '@angular/core';
import { NavParams, PopoverController } from '@ionic/angular';

@Component({
  selector: 'coach-mark',
  templateUrl: './popover.component.html',
  styleUrls: ['./popover.component.scss'],
})
export class PopoverComponent {

  text: string;
  isTheLast: boolean;

  constructor(
      private navParams: NavParams,
      private popoverController: PopoverController
  ) {
    this.index = this.navParams.get('index');
    this.isTheLast = this.navParams.get('isTheLast');
  }

  next(){
    this.popoverController.dismiss("next");
  }

  close(){
    this.popoverController.dismiss("close");
  }
}

popover.service.ts

import { Injectable } from '@angular/core';
import { PopoverController } from '@ionic/angular';
import { PopoverComponent } from './popover.component';

export class PopoverClass {
  componentHTML: HTMLElement;
  text: string;
  constructor(componentHTML: HTMLElement, text: string) {
    this.componentHTML = componentHTML;
    this.text = text;
  }
}

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

  popovers = [];
  currentPopover = 0;

  constructor(public popoverController: PopoverController) { 
  }

  add(component: PopoverClass){
    var _this = this;
    let handler = function(event: Event){
      _this.popovers.push({
        component: PopoverComponent,
        backdropDismiss: false,
        componentProps: { text: component.text, index: _this.popovers.length, isTheLast: false},
        event: event,
        cssClass: 'ion-popover-class',
        mode: "ios"
      });
      component.componentHTML.removeEventListener('event', handler, false);
    };
    component.componentHTML.addEventListener("event", handler, false);
    component.componentHTML.dispatchEvent(new Event("event"));
  }

  showCurrentPopover() {
    //put the last popover how the last. Only the fist time.
    if (this.currentPopover === 0){
      this.popovers[this.popovers.length -1 ].componentProps.isTheLast = true;
    }

    this.popoverController.create(this.popovers[this.currentPopover]).then((popover)=>{
      popover.onDidDismiss().then( (data)=> {
        if (data && data.data && data.data === "next") {
          this.currentPopover = this.currentPopover + 1;
          this.showCurrentPopover();
        }
        if (data && data.data && data.data === "close") {
          this.popovers = [];
          this.currentPopover = 0;
        }
      });
      popover.present();
    });
  }

}