Can't able to highlight Angular Material tabs

[Prshant-Sharma]

I'm using tabs of angular material in my application.

I want to show an intro for these tabs. But intro.js can't able to find them in the DOM I guess because intro showing for these in the center of the screen instead of highlighting those tabs.

Below is my workaround how I'm trying to use it:

<mat-tab id="mat-tabs">
 ...
</mat-tab

In, .ts file:

introJs().setOptions({  
  steps: [{
    title: 'Title of tour',
    intro: 'Lorem ipsum',
    element: '#mat-tabs'
  }]
});

I tried document.getElementById('mat-tabs') also, but no success. It still showing in the middle of the screen.

Please assist how to highlight tabs of Angular material?