Modal not hiding properly after using buttons

I have a modal:

<ng-template #AllNewsModal>
<div class="card start-news" id="START_NEWS_MODULE">
<div class="card-header">
<div class="card-title">
<span>{{ "Start.News" | translate }} </span>
<span class="badge badge-secondary ml-1" *ngIf="news_modal && news_modal.UnreadCnt > 0">{{ news_modal.UnreadCnt }}</span>
<app-tip class="mr-1 pull-right" id="START_NEWS"></app-tip>
</div>
</div>
<div class="modal-body pb-0" [ngStyle]="{ 'overflow-y': !ShowMessageMode_modal ? 'hidden' : 'auto' }" *ngIf="!ShowMessageMode_modal">
<span class="font-set3">{{ "Start.NewsDescription" | translate }}</span>
<button type="button" class="close" (click)="CloseModal()">
<span>&times;</span>
</button>
</div>
<div class="modal-body pb-0" *ngIf="ShowMessageMode_modal && news_sel_modal && news_sel_modal.Title">
<span class="font-set3"> {{news_sel_modal.Title}}</span>
<div class="text-success pull-right" *ngIf="news_sel_modal.PublicationDate">
{{ news_sel_modal.PublicationDate | date: State.FmtDate }}
</div>
<div class="text-success pull-right" *ngIf="!news_sel_modal.PublicationDate">
{{ news_sel_modal.Created | date: State.FmtDate }}
</div>
</div>
<hr class="mb-0" />
<div class="modal-body pt-0" style="max-height: 70vh;">
<div *ngIf="!ShowMessageMode_modal && news_modal && news_modal.Pubs">
<ul class="list-group list-group-flush">
<li class="list-group-item clickable px-0" *ngFor="let i of news_modal.Pubs" (click)="ShowMessage(i, true)">
<div class="pull-right text-success">
<div *ngIf="i.PublicationDate" class="ml-2 mb-2">
<i class="fa fa-fw fa-dot-circle-o" *ngIf="!i.IsRead"></i>
{{ i.PublicationDate | date: State.FmtDate }}
</div>
<div *ngIf="!i.PublicationDate" class="ml-2 mb-2">
<i class="fa fa-fw fa-dot-circle-o" *ngIf="!i.IsRead"></i>
{{ i.Created | date: State.FmtDate }}
</div>
</div>
<div class="text-justify" [innerHtml]="i.Content.ShortHtml"></div>
</li>
</ul>
<div class="modal-footer d-flex justify-content-between">
<button type="button" (click)="ViewAllNews(true, false)" class="btn btn-outline px-0 color-light70-graphite" [ngStyle]="{'visibility': news_page > 0 ? 'visible' : 'hidden'}">
<i class="fa fa-fw fa-arrow-left"></i>
{{ "Button.Back" | translate }}
</button>
<button type="button" (click)="ViewAllNews(true)" class="btn btn-outline px-0 color-light70-graphite" [ngStyle]="{'visibility': !no_next ? 'visible' : 'hidden'}">
<i class="fa fa-fw fa-arrow-right"></i>
{{ "Button.Next" | translate }}
</button>
</div>
</div>
<div class="modal-body px-0 pb-0" *ngIf="ShowMessageMode_modal && news_sel_modal">
<div class="text-justify" [innerHtml]="news_sel_modal.Content.ContentHtml"></div>
<hr />
</div>
</div>
<div class="modal-footer" *ngIf="ShowMessageMode_modal && news_sel_modal">
<button type="button" (click)="HideMessage(true)" class="btn btn-outline px-0 color-light70-graphite">
<i class="fa fa-fw fa-arrow-left"></i>
{{ "Button.Back" | translate }}
</button>
</div>
</div>


With a simple close function (tried directly with 'modal_all_news.hide() but to no avail either).

public CloseModal(){
let t = this;
t.modal_all_news.hide();
}


And if I close my modal right after opening it closes properly.

But if I had used Back or Next buttons it would highlight those buttons instead (depending which one was pressed last) like that:

Next highlighted on Close (x) press

Back highlighted on Close (x) press

What's funny is that the modal will close after i press outside of it enough times. The number of times depends on the number of button clicks I had done before I tried to exit. (for example I had pressed Next 1 time and had to press outside of the modal 3 times for it to disappear completely; 2 times made me press 5 times outside the modal).

Modal is being displayed after clicking on page:

<div class="card-header">
<div class="card-title">
<span (click)="ViewAllNews(true, false, true)">{{ "Start.News" | translate }} </span>
<span class="badge badge-secondary ml-1" *ngIf="news && news.UnreadCnt > 0">{{ news.UnreadCnt }}</span>
<app-tip class="mr-1 pull-right" id="START_NEWS"></app-tip>
</div>
</div>


by invoking this function:

public ViewAllNews(modal: boolean = false, forward: boolean = true, initial: boolean = false) {
let t = this;
let pageSize = 1;

if(initial){
t.news_page = 0;
t.no_next = false;
}

if(modal){
if(forward){
t.news_page++;
} else {
if(t.news_page > 0){
t.news_page--;
}
}
}

let req = <GetNewsReq>{
AccountId: t.State.CurrentUser.Id,
PageSize: modal ? pageSize + 1 : 3,
SkipFirst: modal ? pageSize*t.news_page : 0
};

// get additional items
t.State.StartWorking();
t.http.post<GetNewsRes>(environment.BaseApiUrl + "api/Publication/GetNews", req).subscribe(res => {
if (res) {
t.news_modal = res;
t.modal_all_news = t.modal_srv.show(t.modal_template_all_news, {
class: "modal-dialog modal-dialog-scrollable modal-lg"
});

if(modal){
if(forward){
if(res.Pubs.length <= pageSize) {
t.no_next = true;
} else {
res.Pubs.pop();
}
} else {
t.no_next = false;
res.Pubs.pop();
}
}

} else {
// TODO: display error
}
});

}

Continue reading...