带有Introjs的Angular 7：将类变量显示为工具提示文本

Question

我在angular 7项目中使用了introjs，并且我想在tootip文本中显示类变量 counter 的值。我怎样才能做到这一点？我尝试了这个答案，但它是针对angularjs的。

IntroJS Add Directive To Step Markup

import { Component, OnInit, ElementRef, ViewChild, AfterViewInit, ViewChildren } from '@angular/core';
import * as introJs from 'intro.js/intro.js';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, AfterViewInit {

  @ViewChild('step1') myDiv: ElementRef;
  title = 'introangular7';
  counter = 0;
  introJS = introJs();
  vm = this;
  options = {
    steps: [

      {
        element: '#step1',
        intro: 'This is a tooltip. {{counter}}'
      },
      {
        element: '#step2',
        intro: 'Ok, wasn\'t that fun?',
        position: 'right'
      },
      {
        element: '#step3',
        intro: 'More features, more fun.',
        position: 'left'
      }

    ]
  };


 constructor(private http: HttpClient, private elem: ElementRef) {

 }

  ngOnInit() {
    this.introJS.setOptions(this.options);
    this.introJS.onafterchange(this.increaseNumber);
    this.introJS.start();

  }

  increaseNumber(targetElement: element) {
    this.counter++;
  }


}

更新：我在按钮上显示了工具提示。如果用户单击按钮，计数器的值将更新，我希望用户可以在工具提示文本上看到计数器的值被更改。