title: adding arrow icon after every drop in angular drag and drop
body: <p>I am building a drag and drop list in angular where I want to render 'arrow' (google icon - 'south') after every drop according to a condition. The code I've written is this:</p>
  <pre><code>&lt;div class=&quot;example-box&quot;  
                      *ngFor=&quot;let item of workflow; let i = index&quot; 
                      [cdkDragDisabled]=&quot;item.disabled&quot; cdkDragLockAxis=&quot;y&quot; 
                      cdkDragBoundary=&quot;.workflow-zone&quot; cdkDrag 
                      &gt;
                      &amp;nbsp;&amp;nbsp; &lt;mat-icon&gt;{{item.icon}}&lt;/mat-icon&gt;&amp;nbsp;&amp;nbsp;{{item.value}}
                      &lt;ng-template [ngIf]=&quot;!(item.value === 'Start' || item.value === 'Finish')&quot; &gt;
                          &lt;div class=&quot;delete-icon&quot; &gt;
                              &lt;button class=&quot;button&quot; (click)=&quot;onDelete(i);&quot;&gt;&lt;mat-icon&gt;clear&lt;/mat-icon&gt;&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/ng-template&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;arrow-insertion&quot;
                      *ngFor=&quot;let item of workflow&quot;&gt;
                          &lt;div *ngIf=&quot;item.value === 'Start'; then StartBlock else NotStartBlock&quot;&gt;&lt;/div&gt;
                          &lt;ng-template #StartBlock&gt;
                              &lt;mat-icon&gt;south&lt;/mat-icon&gt;
                          &lt;/ng-template&gt;
                          &lt;ng-template #NotStartBlock&gt;
                              &lt;div *ngIf=&quot;item.value === 'Finish'; then FinishBlock else NotFinishBlock&quot;&gt;&lt;/div&gt;
                              &lt;ng-template #FinishBlock&gt;
                                  &lt;mat-icon&gt;south&lt;/mat-icon&gt;
                              &lt;/ng-template&gt;
                              &lt;ng-template #NotFinishBlock&gt;
                                  &lt;div *ngIf=&quot;item.value === 'Step'; then StepBlock else NotStepBlock&quot;&gt;&lt;/div&gt;
                                  &lt;ng-template #StepBlock&gt;
                                      &lt;mat-icon&gt;south&lt;/mat-icon&gt;
                                  &lt;/ng-template&gt;
                                  &lt;ng-template #NotStepBlock&gt;
                                      &lt;div class=&quot;first-two&quot;&gt;
                                          &lt;mat-icon&gt;west&lt;/mat-icon&gt;&amp;nbsp;&amp;nbsp;&lt;mat-icon&gt;east&lt;/mat-icon&gt;
                                      &lt;/div&gt;
                                      &lt;div class=&quot;next-two&quot;&gt;
                                          &lt;mat-icon&gt;south&lt;/mat-icon&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;mat-icon&gt;south&lt;/mat-icon&gt;
                                      &lt;/div&gt;
                                  &lt;/ng-template&gt;
                              &lt;/ng-template&gt;
                          &lt;/ng-template&gt;
                      &lt;/div&gt;
  </code></pre>
  <p>I have currently made an 'arrow-insertion' div <strong>AFTER</strong> the 'example-box' div. But the arrows are rendered like this: <a href="https://i.stack.imgur.com/SKbav.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SKbav.png" alt="image 1" /></a></p>
  <p>and if I place the 'arrow-insertion' div <strong>INSIDE</strong> the 'example-box', it renders like this: <a href="https://i.stack.imgur.com/8W90Q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8W90Q.png" alt="image 2" /></a></p>
  <p>But I want the arrows to be rendered between each drop, something like this:</p>
  <pre><code>Start
    |
    V
  Step
    |
    V
  Finish
  </code></pre>
  <p>Can anyone please help me with the same? Thanks</p>
  <p>P.S : The start and the finish are always rendered at the start and are not draggable or delete-able, this means that I can only add 'Step' and 'Branch' inside the drop area. I need to render 2 different kinds of arrows for both, for step, it would be just a normal arrow as shown in the images but for branch it would be something like this:</p>
  <pre><code>   Start
       |
       V
     Step
       |
       V
    -------
    |     |
    V     V
   Step  Step       --This would be branch inserted into the drop. Currently it's shown similar 
    |     |           to 'step' with text reading 'branch' instead of 'step' as the only 
    -------           difference. 
       |
       V
     Finish
  </code></pre>