Include hopscotch.css in angular.json

assets/css/hopscotch.css

Add TourComponent into your UIComponentsModule class. ui-components.module.ts would look like this

import {NgModule} from '@angular/core';
import { TourComponent } from './extra/tour/tour.component';

@NgModule({
declarations: [TourComponent]
})
export class UIComponentsModule { }
                

Tour.component.html would look like this

<h1 id="header">My First Hopscotch Tour</h1>
<div id="content">
  <p>Content goes here...</p>
</div>
                        

tour.component.ts would look like this

    import { Component, OnInit } from '@angular/core';

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

      constructor() { }

      ngOnInit() {
        $.getScript('./assets/js/hopscotch.min.js');
        $.getScript('./assets/js/tour.js');
      }

    }
    
                    

tour.js would look like this

    // Define the tour!
    var tour = {
      id: "hello-hopscotch",
      steps: [
        {
          title: "My Header",
          content: "This is the header of my page.",
          target: "header",
          placement: "right"
        },
        {
          title: "My content",
          content: "Here is where I put my content.",
          target: document.querySelector("#content p"),
          placement: "bottom"
        }
      ]
    };

    // Start the tour!
    hopscotch.startTour(tour);