Why is it that the element selection in Intro js does not function properly within a mat card

I have set up a tour with steps and ids for elements. However, any element that is nested within an angular component or sourced from an Angular library will not be highlighted.

Here is my tour setup:

this.introJS.setOptions({
      tooltipClass: 'customTooltip',
      highlightClass: 'customHighlight',
      exitOnOverlayClick: false,
      disableInteraction: false,
      steps: [
        {
          intro: 'Welcome to the website, let me show you around!',
        },
        {
          element: '#step2',
          intro: 'Go to Home',
          position: 'right'
        },
        {
          element: document.getElementById('step3'),
          intro: 'Fill out the form',
          position: 'right'
        },
        {
          element: document.querySelector('#step4'),
          intro: 'Click Create an account',
          position: 'right'
        }
      ]
    }).start();

This is a snippet of the HTML code:

<div>
  <mat-card>
    <mat-card-content>
      <form id="step3" [formGroup]="testForm">
        <h3>test</h3>
          <mat-form-field appearance="outline">
            <mat-label>label</mat-label>
            <mat-select formControlName="role">
              <mat-option>1</mat-option>
            </mat-select>
          </mat-form-field>
      </form>
    </mat-card-content>
  </mat-card>
</div>

Below is what the tip looks like: https://i.sstatic.net/PTDRq.png

The tip appears in the center without highlighting anything.

Edit: If CyC0der's answer is correct, then I am encountering an issue with using the ngnIntroService. I am having difficulty including it correctly. I have posted another question regarding this specific problem here.

Answer №1

My experiment involved integrating intro.js into an angular application, and I successfully managed to get it functioning correctly. To see it in action, you can visit this link: https://stackblitz.com/edit/angular-ivy-ylv4c2

Here are some key points from the stackblitz example above.

I made sure to assign unique ids to all elements.

<mat-card class="example-card" id="step1">

The introJs() function was called within the ngAfterViewInit() lifecycle hook to ensure that introJs could locate all the necessary elements for a smooth introduction process.

ngAfterViewInit(): void {
   this.initIntroJs();
}

initIntroJs(): void {
    introJs()
      .setOptions({
        tooltipClass: 'customTooltip',
        highlightClass: 'customHighlight',
        exitOnOverlayClick: false,
        disableInteraction: false,
        steps: [
          {
            intro: 'Welcome to the web let me show you around!'
          },
          {
            element: document.getElementById('step1'),
            intro: 'Material Card Component',
            position: 'right'
          },
          {
            element: document.getElementById('step2'),
            intro: 'Material Grid Component',
            position: 'right'
          },
          {
            element: document.getElementById('step3'),
            intro: 'Material Button Component',
            position: 'right'
          }
        ]
      })
      .start();
  }

In conclusion, my solution seems straightforward. If you are encountering any difficulties with integration, feel free to review my approach and leave a comment indicating whether it works for you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Navigating through Interfaces in Typescript with Union Types

When faced with a scenario where you have two interfaces that are similar enough to be processed by the same logic, what is the most effective approach to take: interface DescriptionItem { Description: string; Code: string; } interface NamedItem { ...

The module 'json-stringify-safe' could not be located

Encountering an issue while executing the command - ionic serve The code was functioning properly on a different system but seems to be causing trouble for me at the moment. https://i.sstatic.net/X1JG0.png ...

"Implementing global references to *.d.ts files in vscode: A step-by

For vscode to have intellisense support for frameworks like jasmine, the typing file must be referenced explicitly at the beginning of each typescript file as shown below: /// <reference path="./node_modules/@types/jasmine/index.d.ts" /> Is it poss ...

Access child element CSS classes in Angular2

Is there a smarter method for accessing template component classes other than utilizing the reference to nativeElement: this.classes= elm.nativeElement.getAttribute('class'); Instead of returning a string-form list of classes, I'm sure the ...

Configuring ui-router in Angular2 across multiple modules: A step-by-step guide

Looking to set up ui-router in angular 4 to utilize components from various modules? I'm facing an issue where the uiRouter isn't responding when attempting to change state using the uiSref directive. { name: 'app', abstract: t ...

Token authentication in Angular 4

I need to retrieve data from a URL after posting the username and password. However, I encounter an error when trying to get the token using the GET method. The error message is: : Response for preflight has invalid HTTP status code 405. @Component({ ...

The p-datatable component from primeng is experiencing issues and is not displaying as expected

Having trouble using the primeng datatable, I've imported the component but it's not displaying and there are no error messages showing up. In the HTML: <p-dataTable [value]="pessoas" scrollable="true" scrollHeight="200px" [rows]="20" virtua ...

Testing the unit with a customized header in the interceptor

I've been struggling to execute a unit test within an Angular 6 interceptor, but despite numerous attempts, I keep encountering the following error: Error: Expected one matching request for criteria "Match by function: ", found none. I'm rela ...

Troubleshooting issue with applying hover effect to child divs

How come when I hover over one of the child items in my parentDiv, the background of the last childDiv changes no matter which child I place my mouse on? for (let i = 0; i < Number(height); i++) { for (let j = 0; j < Number(width); j++ ...

Template for typed variable - `ng-template`

How can the parent component correctly identify the type of let-content that is coming from ngTemplateOutletContext? The current usage of {{content.type}} works as expected, but my IDE is showing: unresolved variable type Is there a way to specify the ...

What is the best way to delay Angular for 5 seconds before initiating a page transition?

Just a quick inquiry - is there a way to have Angular wait for 5 seconds before redirecting to a different page? I attempted to implement this functionality within my function, but it doesn't appear to be functioning as expected: setTimeout(() => ...

Using useRef with Typescript/Formik - a practical guide

Encountering Typescript errors while passing a ref property into my custom FieldInput for Formik validation. Specifically, in the function: const handleSubmitForm = ( values: FormValues, helpers: FormikHelpers<FormValues>, ) => { ...

Unique validation for matching passwords in Angular applications

Looking to incorporate a registration form into my angular/ionic app. The form consists of 6 fields within a formGroup (username, first name, last name, password, confirm password, gender). I am seeking to validate the data on the client side using Angular ...

Issue with detecting errors in Angular unit test when using jest throwError method

Imagine I have a component that contains the following method: someMethod() { this.someService .doServicesMethod(this.id) .pipe( finalize(() => (this.loading = false)), catchError((e) => { this.showErrorMessage = true; ...

Vercel - Deploying without the need to promote the project

How can I deploy my Nextjs app to production in a way that allows me to run E2E tests on a "pre-prod" version before promoting it to prod, similar to using a preview URL without public traffic being directed there? I am looking for a process where I can v ...

What are the benefits of incorporating NgRx in Angular, even when data is consistently synchronized through two-way data binding?

NgRx, analogous to Redux in React, is a tool used for state management in Angular. While state management can become convoluted in React projects, Angular typically avoids this issue thanks to its two-way data binding synchronization. Interestingly, many ...

Exploring various categories with the pipe operator in Dart

I'm facing a small issue with Dart. I need my parameter to be able to accept a list containing 3 different types. In TypeScript, I would use a pipe operator like this: public x(...parameters: (FirstType | SecondType | ThirdType)[]) Any suggestions on ...

What specific event do I require for the onChange event in React using TypeScript?

I'm facing a problem while working with React TypeScript. I need to type the onChange event for a select element, but the data is coming from event.value instead of event.target.value. What should be the appropriate event to use in this case? Below i ...

Typescript's approach to function decorators in their original form

I have a basic decorator function in Python that I am using to decorate another function. def decorator(fn): def wrapper(args): print("calling function") fn(args) return wrapper @decorator def printMyName(name): prin ...

Using a Google Cloud API that requires authentication without relying on a pre-existing client library

I'm facing some challenges while trying to deploy an application on GCP Marketplace due to the authentication documentation being unclear. According to the documentation, an OAuth scope of https://www.googleapis.com/auth/cloud-platform is necessary, w ...