ngx-pagination, plusieurs contrôles sur la même page

Bonjour,

Je suis en train de faire de la mise en forme sur mon projet et je ne comprend pas un truc. J'ai mis deux controleurs de paginations sur la même page, où je leu ai bien attribué un id sur chaque afin qu'il puisse contrôlé uniquement ce que le concerne mais cela ne fonctionne pas. Puisque les deux contrôleur change tout à chaque fois.

Voici mon code
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
      </div class="col-6 text-center" >
        <div class="row">
          <h3 class="text-center m-auto mb-4">Créneau de prise en charge</h3>
        </div>
        <div class="row">
          <pagination-controls id='pagination1' class="hide-page-numbers m-auto" (pageChange)="p = $event" previousLabel="prec" nextLabel="suiv"></pagination-controls>
        </div>
        <div class="row">
          <div class="col-4 m-auto text-center"*ngFor="let hoursBooking of hoursBookings | paginate: { id: 'pagination1', itemsPerPage: 3, currentPage: p }">
            <p class="hoursBooking">{{ hoursBooking.datebookingCalendar }}</p>
          </div>
        </div>
        <div class="row">
          <div class="col-4 m-auto text-center" *ngFor="let hoursBooking of hoursBookings | paginate: { id: 'pagination1', itemsPerPage: 3, currentPage: p }">
            <div class="radio-group">
              <input name="hoursForth" type="radio" [value]="hoursBooking.h1bookingCalendar" id="h1Forth-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursForth" [ngClass]="{'d-none': hoursBooking.h1bookingCalendar === 'pris'}">
              <label class="hoursBookingLabel" for="h1Forth-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h1bookingCalendar === 'pris'}">07:30</label>
              <input name="hoursForth" type="radio" [value]="hoursBooking.h2bookingCalendar" id="h2Forth-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursForth" [ngClass]="{'d-none': hoursBooking.h2bookingCalendar === 'pris'}">
              <label class="hoursBookingLabel" for="h2Forth-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h2bookingCalendar === 'pris'}">08:30</label>
              <input name="hoursForth" type="radio" [value]="hoursBooking.h3bookingCalendar" id="h3Forth-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursForth" [ngClass]="{'d-none': hoursBooking.h3bookingCalendar === 'pris'}">
              <label class="hoursBookingLabel" for="h3Forth-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h3bookingCalendar === 'pris'}">09:30</label>
              <input name="hoursForth" type="radio" [value]="hoursBooking.h4bookingCalendar" id="h4Forth-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursForth" [ngClass]="{'d-none': hoursBooking.h4bookingCalendar === 'pris'}">
              <label class="hoursBookingLabel" for="h4Forth-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h4bookingCalendar === 'pris'}">10:30</label>
              <input name="hoursForth" type="radio" [value]="hoursBooking.h5bookingCalendar" id="h5Forth-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursForth" [ngClass]="{'d-none': hoursBooking.h5bookingCalendar === 'pris'}">
              <label class="hoursBookingLabel" for="h5Forth-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h5bookingCalendar === 'pris'}">11:30</label>
              <input name="hoursForth" type="radio" [value]="hoursBooking.h6bookingCalendar" id="h6Forth-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursForth" [ngClass]="{'d-none': hoursBooking.h6bookingCalendar === 'pris'}">
              <label class="hoursBookingLabel" for="h6Forth-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h6bookingCalendar === 'pris'}">13:30</label>
              <input name="hoursForth" type="radio" [value]="hoursBooking.h7bookingCalendar" id="h7Forth-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursForth" [ngClass]="{'d-none': hoursBooking.h7bookingCalendar === 'pris'}">
              <label class="hoursBookingLabel" for="h7Forth-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h7bookingCalendar === 'pris'}">14:30</label>
              <input name="hoursForth" type="radio" [value]="hoursBooking.h8bookingCalendar" id="h8Forth-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursForth" [ngClass]="{'d-none': hoursBooking.h8bookingCalendar === 'pris'}">
              <label class="hoursBookingLabel" for="h8Forth-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h8bookingCalendar === 'pris'}">15:30</label>
              <input name="hoursForth" type="radio" [value]="hoursBooking.h9bookingCalendar" id="h9Forth-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursForth" [ngClass]="{'d-none': hoursBooking.h9bookingCalendar === 'pris'}">
              <label class="hoursBookingLabel" for="h9Forth-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h9bookingCalendar === 'pris'}">16:30</label>
              <input name="hoursForth" type="radio" [value]="hoursBooking.h10bookingCalendar" id="h10Forth-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursForth" [ngClass]="{'d-none': hoursBooking.h10bookingCalendar === 'pris'}">
              <label class="hoursBookingLabel" for="h10Forth-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h10bookingCalendar === 'pris'}">17:30</label>
              <input name="hoursForth" type="radio" [value]="hoursBooking.h11bookingCalendar" id="h11Forth-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursForth" [ngClass]="{'d-none': hoursBooking.h11bookingCalendar === 'pris'}">
              <label class="hoursBookingLabel" for="h11Forth-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h11bookingCalendar === 'pris'}">18:30</label>
            </div>
          </div>
        </div>
 
        <div class="row sepHoursBooking">
          <h3 class="text-center m-auto">Créneau de restitution</h3>
        </div>
        <div class="row">
          <pagination-controls id='pagination2' class="hide-page-numbers m-auto" (pageChange)="p = $event" previousLabel="prec" nextLabel="suiv"></pagination-controls>
        </div>
        <div class="row">
          <div class="col-4 m-auto text-center"*ngFor="let hoursBooking of hoursBookings | paginate: { id: 'pagination2', itemsPerPage: 3, currentPage: p }">
            <p class="hoursBooking">{{ hoursBooking.datebookingCalendar }}</p>
          </div>
        </div>
 
      </div>
Je ne pense qu'il y a un truc de la doc que j'ai du mal comprendre.