'How to remove arrow before image in new line for dynamic data?

I Have a dynamic content rendered from angular that generates a follow HTML:

<div class="complted" *ngFor="let step of letStep1to7; let i = index; let first = first">
    <table>
      <td><img width="60px" [ngClass]="{lastArrow: first }" src="../../assets/images/arr.png" alt=""></td>
      <td class="steps" [ngClass]="{ last: last }">
        <img class="completeimg" src={{step.img}} alt="">
        <p class="card-text1"> Step {{i+1}}: Completed</p>
        <p class="card-text1">{{step.ReturnDisplayC}}</p>
        <p class="card-text1"><b>Date:</b> {{step.ReturnStatus}}</p>
        <p class="card-text">{{step.ReturnStatus}}</p>
      </td>

    </table>
  </div>

i want to remove arrow before image for this dynamic data, please help me on how can i remove arrow image for next line of data as highlighted in image. Any help would be highly appreciated. Thanks in advance.want to remove starting arrow from new line

enter image description here

javascriptcssangularbootstrap-4tensorflow2.0semantic-segmentation


Solution 1:[1]

You can remove the td for arrow image.

<div class="complted" *ngFor="let step of letStep1to7; let i = index; let first = first">
    <table>
      <td class="steps" [ngClass]="{ last: last }">
        <div style="display: inline;">
          <img class="completeimg" src={{step.img}} alt="">
          <p class="card-text1"> Step {{i+1}}: Completed</p>
          <p class="card-text1">{{step.ReturnDisplayC}}</p>
          <p class="card-text1"><b>Date:</b> {{step.ReturnStatus}}</p>
          <p class="card-text">{{step.ReturnStatus}}</p>
        </div>
        <img width="60px" [ngClass]="{lastArrow: first }" src="../../assets/images/arr.png" alt="">
      </td>    
    </table>
</div>

Hope it could help.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions