Раскрывающийся список не закрывается при выборе опции раскрывающегося списка в angular?

Question

У меня есть проект angular7, и у меня есть table, где отображаются записи, если они есть. Каждая запись имеет key с именем status, значения которого Approved, Rejected, Pending. У меня есть dropdown внутри table th, из которого я выбираю ссылку status и фильтрую записи соответственно. Это работает нормально, записи фильтруются некорректно. Но когда я выбираю любой status из dropdown, dropdown должен закрыться, но сейчас он не закрывается. У меня есть целые table вот так

<div class="row ml-0 mr-0" *ngIf="masterRefLinkArr.length > 0">
<div class="col-12">
    <table class="table table-responsive">
        <thead class="position-relative">
            <th class="user-profile-th">
                <label class="container-checkbox">
                    <input type="checkbox" class="site-checkbox" [(ngModel)]="allRowsSelected" [class.selected]="allRowsSelected" (click)="onCheckmarkClick()">
                    <span class="checkmark-checkbox"></span>
                </label>
            </th>
            <th class="user-profile-th" (click)="sort('referral_link')">
                <span class="Cpointer">Company</span>
                <img class="tbl-hdr-icon  Cpointer" src="./assets/img/open.png">
            </th>
            <th class="user-profile-th link-code"><b>Link/Code</b></th>
            <th class="user-profile-th">
                <span class="Cpointer">Clicks</span>
                <img class="tbl-hdr-icon Cpointer" src="./assets/img/open.png">
            </th>
            <th class="user-profile-th" id="status" (click)="onStatusClick()" (clickOutside)="onClickedOutside($event)">
                <span class="Cpointer status-label">Status</span>
                <img class="tbl-hdr-icon" src="./assets/img/filter.png">
                <ul class="status-table-ul">
                    <li class="status-table-li" [ngClass]="{'selected': selectedIndex === i, 'all' : filterOpt.label === 'All'}" *ngFor="let filterOpt of referralFilterOptions;let i = index">
                        <label class="container" (click)="onFilterSelect(i,filterOpt.label)">{{filterOpt.label}}
                            <input type="radio" [(ngModel)]="selectedFilterOption" name="radio" [value]="filterOpt.label">
                            <span class="checkmark"></span>
                        </label>
                    </li>
                </ul>
            </th>

        </thead>

        <tbody *ngIf="refLinkArr.length > 0">
            <tr *ngFor="let row of refLinkArr; let i=index">
                <td>
                    <label class="container-checkbox">
                        <input type="checkbox" class="site-checkbox" [(ngModel)]="row.isSelected" [class.selected]="row.isSelected">
                        <span class="checkmark-checkbox"></span>
                    </label>
                </td>
                <!-- <td><i class="material-icons cursor-pointer" matTooltip="Delete" style="color:red;font-size: 18px;" (click)="delete(row)">delete</i></td> -->
                <td>{{row.companyId?.name}}</td>
                <td class="refrl">{{row.isLink === 1? row.referral_link : row.referral_code}}</td>
                <td>{{row.number_of_clicks}}</td>
                <td>
                    <div [class.rejected]="row.link_status === 'Rejected'" [class.pending]="row.link_status === 'Pending'" [class.approved]="row.link_status === 'Approved'" class="tag-cstm">
                        {{row.link_status}}
                    </div>
                </td>
            </tr>

        </tbody>
    </table>
    <p *ngIf="refLinkArr.length === 0" class="referral-not-found-text">Not found</p>
</div>

Вот jquery в ngAfterViewInit для обработки показа и скрытия выпадающего списка в .ts

ngAfterViewInit(){

    $('.status-table-li').click(function(){
        if($('.status-table-li').hasClass('selected')) {
            $('.status-table-li').removeClass('selected');
        }
        else{
            $('.status-table-li').addClass('selected');
        }          
    });  

    $('label.container').click(function(){
        $("ul.status-table-ul").removeClass("show-menu"); 
    });
 }

onStatusClick(){
    $("ul.status-table-ul").toggleClass("show-menu");       
}
onClickedOutside(e: Event) {
    $("ul.status-table-ul").removeClass("show-menu"); 
}

Теперь я запутался, почему раскрывающийся список не закрывается, когда я выбираю любой вариант из раскрывающегося списка.