how to change ngx bootstrap backdrop modal when two modals are open - angular5

Question

ngx-bootstrap for angular with bootstrap 4 version you see the below code when we open one popup the backdrop is working fine when we open another popup(modal) from the first modal the backdrop opacity is not reflecting on the first popup. The opacity is not changing how to change the opacity(backdrop) of first modal when second modal is open.
import { Component, TemplateRef } from '#angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
#Component({
selector: 'demo-modal-service-nested',
templateUrl: './service-nested.html'
})
export class DemoModalServiceNestedComponent {
modalRef: BsModalRef;
modalRef2: BsModalRef;
constructor(private modalService: BsModalService) {}
openModal(template: TemplateRef<any>) {
this.modalRef = this.modalService.show(template, { class: 'modal-lg' });
}
openModal2(template: TemplateRef<any>) {
this.modalRef2 = this.modalService.show(template, { class: 'second' });
}
closeFirstModal() {
this.modalRef.hide();
this.modalRef = null;
}
}
<button type="button" class="btn btn-primary" (click)="openModal(template)">Open first modal</button>
<ng-template #template>
<div class="modal-header">
<h4 class="modal-title pull-left">First modal</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
This is a first modal
<button type="button" class="btn btn-primary" (click)="openModal2(templateNested)">Open second modal</button>
</div>
</ng-template>
<ng-template #templateNested>
<div class="modal-header">
<h4 class="modal-title pull-left">Second modal</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef2.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
This is nested modal.<br>
<button *ngIf="modalRef" type="button" class="btn btn-danger" (click)="closeFirstModal()">Close first modal</button>
</div>
</ng-template>

Answer 1

I need to show 2 overlapping modals, the second is smaller than the first and I just can't hide the first. My solution was to apply a background-color to the second one:
openModal2(template: TemplateRef<any>) {
this.modalRef2 = this.modalService.show(template, { class: 'second' });
document.getElementsByClassName('second')[0].parentElement.style.backgroundColor = 'rgba(0, 0, 0, 0.4)';
}
document.getElementsByClassName('second')[0].parentElement.style.backgroundColor
= 'rgba(0, 0, 0, 0.4)';

Answer 2

I have found a CSS workround for nested modal backdrop issue.
.modal {
background: rgba(0, 0, 0, .3);
}