CSS or JS - Hide old elements from html

I have a set of paragrapghs in my Ionic 4 project's html file:

<! –– page 1 ––>
<p *ngIf="x1">Text 1</p>
<p *ngIf="x2">Text 2</p>
<p *ngIf="x3">Text 3</p>

<! –– page 2 ––>
<p *ngIf="x4">Text 4</p>
<p *ngIf="x5">Text 5</p>
<p *ngIf="x6">Text 6</p>

<! –– page 3... ––>

I have a public counter = 0, starting from 0 counting +1 on click. I am controlling the above paragraphs via ngIf, setting them "true" in ts (if counter = 4, x4=true).

I want to set up an automated rule, either CSS or ts that limits the number of paragraphs visible on webpage (without setting the paragraphs' ngIf to false).

Conditions & remarks: So when x4 is visible, then x1,x2,x3 should not be visible. Only 3 paragraphs should be visible at the same time with a page rule in mind. This rule should be applied to all numbers positioning in page (e.g. if counter = 5, x5=true), only x4 and x5 should be visible (x6 = false, while the counter did not reach it).

What would your solution be?