My popup does not display when it is put in a conditional block, but the condition is...

` <div *ngIf="!isLoading" class="flex w-full max-md:mt-5 items-center justify-end max-md:justify-end max-lg:justify-start">

code of app-success-reservation:
<button data-modal-target="popup-modal" data-modal-toggle="popup-modal" type="button" class="flex items-center gap-2 mt-10 rounded-lg disabled:bg-gray-200 bg-blue-500 px-5 py-3 hover:bg-bleu-800 transition-colors ease-in-out duration-200 text-xl font-medium text-white max-sm:text-sm max-md:text-lg">
{{'Effectuer la réservation'|translate}}
</button>
<div id="popup-modal" tabindex="-1" class="hidden overflow-y-auto duration-500 overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
<div class="relative p-4 w-full max-w-md max-h-full">
<div class="relative bg-white rounded-lg shadow-sm dark:bg-gray-700">
<div class="p-4 md-5 text-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="mx-auto mb-4 text-green-400 w-12 h-12 dark:text-gray-200">
<path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" />
</svg>
<h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">{{"Réservation éffectueé avec succès !"|translate}}</h3>
<div class="flex items-center max-sm:flex-wrap max-sm:justify-center max-sm:gap-2">
<button data-modal-hide="popup-modal" type="button" (click)="ontrajet()" class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focusutline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">{{'Consulter autres trajets'|translate}}</button>
<button data-modal-hide="popup-modal" type="button" (click)="onClick()" class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focusutline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">{{'Voir détails réservation'|translate}}</button>
</div> w
</div>
</div>
</div>
</div>


`

Continue reading...