Joyride step appearing on top-left corner

[sarita09]

I have a component and using on page like this <app-issues *ngFor="let issue of issueLists; let first=index;" [data]="issue" [firstEle]="first"></app-issues>

Each instance of this component have dropdown. I am targeting first instance's dropdown for the joyride steps like this

<select [joyrideStep]="firstEle === 0 ? 'issue2' : 'dummy'" [stepContent]="firstEle === 0 ? stepContentIssue2 : null" [title]="firstEle === 0 ? 'Raise An Issue' : null">
      <option value="active">Active</option>
      <option value="resolved">Resolved</option>
      <option value="irrelevant">Irrelevant</option>

    </select>

This is working fine as you can see below

Now if I delete the first instance from this component list, the joyride step is not targeting to new first instance instead its appearing on top-left corner.

I am using angular: 7.2.15 ngx-joyride: 2.2.9