JQuery ошибка с угловым

Question

Я создаю проект с angular, и я использовал некоторые модалы с jquery, но это не сработало, так как я хочу, чтобы оно работало, когда я нажимаю на первый модал в первом компоненте, оно работает нормально, но когда я двигаюсь длядругой компонент и вызывает другой модал, он показывает мне старый и новый одновременно

Подробнее:

первый модал в первый компонент

и когда я пойду за другим компонентом и вызову другой модальный

я буду очень благодарен, если кто-нибудь сможет помочь !!

первый модал:

    <div class="ui modal nouveaux">
        <i class="close icon"></i>
        <div class="header">
            Affecter Nouveaux stage
        </div>
        <div>
        </div>
        <form class="ui form">
            <div class="two fields">
                <div class="field">
                    <label>Nom De Stage</label>
                    <input id="nom" type="text" placeholder="Nom de stage ..." [(ngModel)]="nomStage"
                           [ngModelOptions]="{standalone: true}">
                </div>
                <div class="field">
                    <label>Nom & prenom etudiant</label>
                    <select id="etudiant"  class="ui search dropdown" (click)="selectedhandler($event)">
                        <option disabled selected hidden>Choisir...</option>
                        <option *ngFor="let etudiant of listEtudiant" value="{{etudiant.cin}}">
                            {{etudiant.nom | titlecase}}
                            {{etudiant.prenom | titlecase}}
                        </option>
                    </select>
                </div>
            </div>
            <div class="two fields">

                <div class="field">
                    <label>Nom & prenom enseignant </label>
                    <select id="enseignant" class="ui search dropdown" (click)="selectedhandlerEnseignant($event)">
                        <option disabled selected hidden value="choisir">Choisir...</option>
                        <option *ngFor="let enseignant of listEnseignant" value="{{enseignant.id_en}}">
                            {{enseignant.nom_en | titlecase}}
                            {{enseignant.prenom_en | titlecase}}
                        </option>
                    </select>

                </div>
                <div class="field">
                    <label>Service</label>
                    <select id="service" class="ui search dropdown" (click)="selectedhandlerService($event)">
                        <option disabled selected hidden>Choisir...</option>
                        <option *ngFor="let service of listService" [value]="service.id_service">
                            {{service.nom_service | titlecase}}
                        </option>
                    </select>
                </div>
            </div>
            <div class="two fields">
                <div class="field">
                    <label>Date debut</label>
                    <input id="date_d" type="date" name="last-name" [(ngModel)]="date_d"
                           [ngModelOptions]="{standalone: true}">
                </div>
                <div class="field">
                    <label>Date fin</label>
                    <input id="date_f" type="date" name="last-name" [(ngModel)]="date_f"
                           [ngModelOptions]="{standalone: true}">
                </div>
            </div>

            <div class="two fields">
                <div class="field">
                    <label>Objectif</label>
                    <select name="skills[]" class="ui fluid multiple selection dropdown" id="multi-select">
                        <option selected hidden>Choisir...</option>
                        <option *ngFor="let objectif of listObjectif" [value]="objectif.id_obj">{{objectif.des_obj | titlecase}}
                        </option>
                    </select>
                </div>
            </div>
            <div *ngIf="nomStage?.length===0" id="span">
                <span class="ui red message">Nom de stage bligatoire</span>
            </div>
            <div *ngIf="etudiantcin?.toString().length===0" id="span">
                <span class="ui red message">Etudiant bligatoire</span>
            </div>
            <div *ngIf="enseignantid?.toString().length===0" id="span">
                <span class="ui red message">Enseignant bligatoire</span>
            </div>
            <div *ngIf="serviceid?.toString().length===0" id="span">
                <span class="ui red message">Service bligatoire</span>
            </div>
            <div *ngIf="date_d?.length===0" id="span">
                <span class="ui red message">Date debut bligatoire</span>
            </div>
            <div *ngIf="date_f?.length===0" id="span">
                <span class="ui red message">Date fin bligatoire</span>
            </div>
        </form>
        <div class="actions">
            <div class="ui black deny button" (click)="Annuler()">
                Annuler
            </div>

            <div class="ui positive right labeled icon button" (click)="insertStage(nomStage,date_d,date_f)"
                 *ngIf="date_f && date_d && selectedObjectif && serviceid && enseignantid && etudiantcin && nomStage">
                <i class="checkmark icon"></i>
                Ajouter
            </div>
        </div>
    </div>

это код, как я показываю первый модал

showModal(): void {
    $('.ui.modal.nouveaux').modal('show');
    this.drop();
}

это второй модал

<div class="ui modal nouveaux">
    <i class="close icon"></i>
    <div class="header">
        Ajouter nouveaux classe
    </div>

    <form class="ui form">
        <div class="field">
            <label>Nom de classe</label>
            <input type="text" name="Nom_de_class" id="Nom_de_class" placeholder="Nom de service" class="form-control"
                        [(ngModel)]="nom_class" required minlength="2">
        </div>
        <div *ngIf="nom_class?.length === 0" id="span">
        <span  class="ui red message" >Nom de classe est obligatoire</span>
        </div>
        <div class="actions" (click)="cancel()">
        <div class="ui black deny button">
            Annuler
        </div>
        <div class="ui positive right labeled icon button" *ngIf="nom_class" (click)="insertClasse(nom_class)">
            <i class="checkmark icon"></i>
            Ajouter
        </div>
    </div>
    </form>
</div>

этокак я показываю второй модал

showModal(): void {
        $('.ui.modal.nouveaux').modal('show');
    }