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; } }

Al imprimir, el contenido del encabezado se superpone y solo se muestra el último elemento en ngfor en el encabezado. Cómo mostrar el contenido de cada elemento en el encabezado al imprimir