HTML :

<div class="item-view break-after " *ngFor="let item of selectedItems; let i = index">
    // HEADER
    <div class="report container">            
            <div class="report-date">
                <div class="content-area">
                    <span class="size-13 uppercase">Date:</span><span class="uppercase"> {{ 
                      date?.displayLong }}</span>
                      <span class="pull-right">
                        <span class="size-13 uppercase" > Item: </span> 
                        {{item.firstName}} {{item.lastName}} -  {{item.code}}"
                      </span>
                </div>
            </div>
        </div>                
       <div> content </div>
    </div>

css:

.report-date {
  flex-basis: 100%;
  background-color: green;
  font-size: 18px;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  flex-wrap: wrap;
  padding: 0;
  color:white;

  .content-area {
    max-width: 1170px;
    margin: 0 auto;
    position: relative;
  }

}

When printing the header content is overlapping and only the last item in ngfor is displayed in header. How to display each item content in header when printing