Angular Flex boxes with connecting line

Question

I am trying to create a couple boxes with text inside and a line that connects them all. I created a class for each box like this:

.box {
  background: white;
  border: 1px solid black;
  color: black;
  border-radius: 8px;
  padding: 8px 20px;
  margin: 20px;
}

And then to create a couple boxes I have this:

<div fxLayout="row" fxLayoutAlign="space-between">
   <div class="box" *ngFor="let box of boxes" fxLayout="column" fxLayoutAlign="start center">
     <div>
       {{box.firstText}}
     </div>
     <div>
        {{box.secondText}}
     </div>
   </div>
</div>

I am trying to add a horizontal line that connects each box so I tried to add a <hr> tag at the end of the box in each loop like this:

<div fxLayout="row" fxLayoutAlign="space-between">
       <div class="box" *ngFor="let box of boxes" fxLayout="column" fxLayoutAlign="start center">
         <div>
           {{box.firstText}}
         </div>
         <div>
            {{box.secondText}}
         </div>
          <hr> //Addded here
       </div>
    </div>

But this line doesn't show up anywhere

Answer 1

The hr doesn't show between because it is within the column layout, so it is being added at the bottom of the inside of the .box.

The hr should be a child of the row structure because we want it next to the boxes, but we also want it to be repeated between each box, so it must be in the ngFor. We can use a ng-container to hold the for loop (and it will be invisible in the dom, so fxLayout doesn't affect it).

<div fxLayout="row" fxLayoutAlign="space-between center">
  <ng-container *ngFor="let box of boxes; let l=last">
    <div class="box" fxLayout="column" fxLayoutAlign="start center">
      <div>
        {{box.firstText}}
      </div>
      <div>
        {{box.secondText}}
      </div>
      <hr>
    </div>
    <hr fxFlex *ngIf="!l">
  </ng-container>
</div>

I also added center to the fxLayoutAlign to vertically center the hr.

And in the ngFor I added ; let l=last to be able to hide the last hr with a ngIf.

Here is the result: