У меня проблема, когда мой компонент, который я пытаюсь использовать повторно, дублируется. Итак, это наложение, но оно отображается дважды, один поверх другого. Вот мой код.
оверлей. html
<div *ngIf="isHelpTips" id="parent" >
<div class="small-modcontainer">
<div class="grid grid-cols-1 step">
<div class="bg-black small-top-header relative shadow-md">
<div class="are-you-sure">
<div class="text-left font-sans">
<span class="font-hairline ml-2 text-3xl text-white">{{subtext}} </span>
</div>
<div class="text-left font-sans">
<span class="font-hairline ml-2 text-3xl text-white">{{subtext1}}</span>
</div>
</div>
</div>
<div class="bg-white small-content relative shadow-md">
<div>
<div class="flex flex-row mt-10">
<div>
<div class="mt-8" >
<span class="font-light ml-10 text-2xl text-black">{{header1}} </span>
</div>
<div>
<div class="font-light ml-10 mt-1 text-base text-black">{{info1}} </div>
</div>
<div>
<div class="font-light ml-10 mt-1 text-base text-black">{{info2}} </div>
</div>
</div>
</div>
</div>
<div class="flex flex-row mr-4 float-right">
<button (click)="isHelpTips = false" class="bg-orange-500 orange-btn font-semibold mt-4 mr-12 w-2/5 text-sm shadow-md text-center right-0 p-2 rounded-full text-white uppercase cursor-pointer">continue</button>
</div>
</div>
</div>
</div>
</div>
overlay.ts
isHelpTips: boolean = true;
второй компонент. html
<app-continue-warning
subtext="Before we show you your savings,"
subtext1="it's important that you note the following:"
header1="Broker details"
info1="The details of the broker to receive your transfer. You should ask HR for the details of the broker at your new employer."
header2="Banking details"
info2="Your banking details, including your bank name, account number and account type.">
</app-continue-warning>
Когда я нажимаю кнопку «Продолжить», одно наложение уходит, но другое остается видимым