Page break in Angular with Chartjs and tables

Question

I have this html where app-sales-by-category-total is a component using chartjs. This has multiple charts since it's in a for loop.

<div class="sales-cat-total">
  <h2>Sales By Category Total</h2>
  <div class="app-wrapper">
    <ng-container *ngFor="let division of categoryTotalData.divisions">
        <div class="category-tag">
          <div class="cat-item division" [ngStyle]="setBgColor(division.name)">
              <app-sales-by-category-total [month]="categoryTotalData.months" [division]="division"></app-sales-by-category-total>
          </div>
        </div>          
    </ng-container>
  </div>
</div>

Page break won't work. This is my css

.app-wrapper,
.sales-cat-total {
    page-break-after: always; 
    page-break-inside: avoid; 
    -webkit-region-break-inside: avoid;
    break-inside: avoid-page;
}

This is the ouput

Even in tables, page break doesn't seem to work at all with this css:

table {
    page-break-inside: auto;
}

tr {
    page-break-inside: avoid;
}

Answer 1

hey you can add br tag

    <ng-container *ngFor="let division of categoryTotalData.divisions">
            <div class="category-tag">
              <div class="cat-item division" [ngStyle]="setBgColor(division.name)">
                  <app-sales-by-category-total [month]="categoryTotalData.months" [division]="division"></app-sales-by-category-total>
              </div>
            </div>   
            </br>       
        </ng-container>

Answer 2

This is due to ViewEncapsulation. In order to change the view of child you need to use ng-deep pseudo-class

app-sales-by-category-total ::ng-deep {
  table {
    // Style goes here
  }
}