How to split HTML Page in A4 size in Angular 9

I am trying to create something like in Xing the CV maker -> https://lebenslauf.com/.

I do have different Arrays of Objects. But I am not able to create the A4 pages which will render the data and if the array it is larger than one page create new page A4 and add data there. The function needs to be so if the array is larger for one size, then create a new page a4 and put the data there. In the stackblitz I have added an array and some random text and designed an A4 letter. I referred to this question and answer, but didn't help me too much. CSS to set A4 paper size.
I tried to fake pagination and to create A4 sizes but didn't work.
I looked in this code with jquery there. It works, but I am unable to compile it in Angular. https://jsfiddle.net/tm637ysp/10/ Can someone help me here ?

I have created two projects in stackblitz. Maybe they will help.
https://stackblitz.com/edit/angular-ivy-fjhpdu.
https://stackblitz.com/edit/angular-ivy-uzmdwg

This is the code I am trying to show data.

<div class="A4">
  <div #A4>
  <div *ngFor="let personalData of content.personalData; let i = index">
    <app-personal-data [personalData]="personalData" [model]="content" [index]="i">
    </app-personal-data>
  </div>
  <div  *ngFor="let career of content.careers; let i = index;">
    <app-career [career]="career" [model]="content" [index]="i"></app-career>
  </div>
  <div  *ngFor="let education of content.education;">
    <app-education [education]="education" [model]="content"></app-education>
  </div>
  <div  *ngFor="let skills of content.skills;">
    <app-skills [skills]="skills" [model]="content"></app-skills>
  </div>
</div>
</div>

This is the CSS

.A4 {
  background: white;
  width: 21cm;
  height: 29.7cm;
  display: block;
  margin: 0 auto;
  padding: 10px 25px;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}

@media print {
  .page-break {
    display: block;
    page-break-before: always;
  }

}

@media print {
  body {
    margin: 0;
    padding: 0;
  }
  .A4 {
    box-shadow: none;
    margin: 0;
    width: auto;
    height: auto;
  }
  .noprint {
    display: none;
  }
  .enable-print {
    display: block;
  }
}


@media print {
  .page-break {
    display: block;
    page-break-before: always;
}}

@media print {
  body {
    margin: 0;
    padding: 0;
  }
  .container {
    box-shadow: none;
    margin: 0;
    width: auto;
    height: auto;
  }
  .noprint {
    display: none;
  }
  .enable-print {
    display: block;
  }
}

This is the TS file

@Input() content: Model;
  @Input() index: any;
  // tslint:disable-next-line:no-output-on-prefix
  @Output() onNewField = new EventEmitter();
  @ViewChild("A4", {static: true}) element: ElementRef;
  width: number;
  height: number;
  public maxPages = 10;
  public pageCount = 0;


  constructor() { }

This is the json

{
    "personalData": [
        {
  
            "firstName": "Max",
            "lastName": "Muster",
            "email": "max.musterman@outlook.com",
            "birthday": "2020-09-25T00:00:00.000Z",
            "telephone": "0123456789",
            "job": "Freelancer",
            "country": "Germany",
            "postalCode": 12345,
            "city": "None",
            "title": 2,
            "gender": 0,
            "street": "Musterman 12",
            "state": "",
            "status": 1,
            "showBirthday": true
        }
    ],
    "skills": [
        {
            "subCategories": [
                {
                    "languages": [
                        {
                            "name": "languages.de",
                            "rate": 5
                        },
                        {
                            "name": "languages.al",
                            "rate": 1
                        },
                        {
                            "name": "languages.en",
                            "rate": 5
                        },
                        {
                            "name": "languages.fr",
                            "rate": 4
                        },
                        {
                            "name": "languages.it",
                            "rate": 4
                        }
                    ],
                    "pcKnowledge": [
                        {
                            "_id": "5f5ca07e4dba443f786ea7ae",
                            "name": "Word"
                        },
                        {
                            "_id": "5f5ca07e4dba443f786ea7af",
                            "name": "Adobe Photoshop"
                        },
                        {
                            "_id": "5f5fd46bb21df2444c39f317",
                            "name": "Test"
                        },
                        {
                            "_id": "5f5fd46bb21df2444c39f318",
                            "name": "Excel"
                        },
                        {
                            "_id": "5f5fd46bb21df2444c39f319",
                            "name": "Ja"
                        },
                        {
                            "_id": "5f72339552009b4244391972",
                            "name": "Powerpoint"
                        }
                    ],
                    "skillsOffer": [
                        {
                            "_id": "5f4a4e2d718d33092df2c327",
                            "name": "Angular"
                        },
                        {
                            "_id": "5f4a4e2d718d33092df2c327",
                            "name": "Java"
                        },
                        {
                            "_id": "5f4a4e2d718d33092df2c327",
                            "name": "Typescript"
                        },
                        {
                            "_id": "5f4a4e2d718d33092df2c327",
                            "name": "html"
                        },
                        {
                            "name": "Javascript"
                        }
                    ],
                    "driveLicenses": [
                        {
                            "_id": "5f5ca07e4dba443f786ea7ac",
                            "name": "B"
                        },
                        {
                            "_id": "5f5ca07e4dba443f786ea7ad",
                            "name": "C"
                        },
                        {
                            "_id": "5f5f204faa5d0205180bd581",
                            "name": "B"
                        }
                    ],
                    "name": "",
                    "qualifications": ""
                }
            ]
        }
    ]
}

from How to split HTML Page in A4 size in Angular 9