How to apply width to specific child ngx-bootstrap Modal from parent component CSS

Question

I am using the following CSS code in parent component CSS file to change the width of a child modal (I am using NGX bootstrap modals).

Parent CSS:

::ng-deep .modal-dialog {
    min-width: 1000px;
}

Parent HTML:

<!-- Modal -->
<div class="modal-header" style="padding-bottom: 0px">
    <h2 class="modal-title" id="exampleModalLabel">Modification History</h2>
    <button type="button" class="close" data-dismiss="modal" (click)="bsModalRef.hide()" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="modal-body">
    <app-mod-logs [searchInput]="searchInput"></app-mod-logs>
</div>

Child HTML:

<div class="modal-dialog filter">
<div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel">
        Advanced Filter
    </h5>
    <button type="button" 
        class="close" 
        data-dismiss="modal" 
        (click)="bsModalRef.hide()" 
        aria-label="Close">
        <span aria-hidden="true">
            &times;
        </span>
    </button>
</div>
<div class="modal-body">
    <div class="row">
        <div class="col-md-4 py-3 px-lg-1 border bg-light column1">
            <div class="heading">
                <b>Available Objects</b>
            </div>
            <ul class="list-group container1">
                <li class="list-group-item list-group-item-action"
                [ngStyle]="{width: objectWidth}"
                [class.active]="active === i" 
                (click)='loadKeyItems(object.KeyObject); activated(i);' 
                *ngFor="let object of availableObjects; let i = index;">
                    {{object.SourceObject}}
                </li>
            </ul>
        </div>
        <div class="col-md-4 py-3 px-lg-1 border bg-light column2">
            <div class="heading">
                <b>Available Items</b>
            </div>
            <ul class="list-group container2">
                <ngx-spinner name="boxSpinner" 
                    [fullScreen]="false" 
                    type="ball-spin-clockwise" 
                    size="small">
                </ngx-spinner>
                <li [ngStyle]="{width: availableWidth}" 
                    class="list-group-item list-group-item-action" 
                    (dblclick)='pushToSelected(keyItem.Id)' 
                    (mousedown)="disableTextSelection($event)" 
                    *ngFor="let keyItem of KeyItems">
                        {{keyItem.Caption}}
                </li>
            </ul>
        </div>
        <div class="col-md-4 py-3 px-lg-1 border bg-light column3">
            <div class="heading">
                <b>Selected Items</b>
            </div>
            <ul class="list-group container3">
                <li [ngStyle]="{width: selectedWidth}" 
                    class="list-group-item list-group-item-action" 
                    (dblclick)='pushToAvailable(select.Id)' 
                    (mousedown)="disableTextSelection($event)" 
                    *ngFor='let select of selectedItemArray'>
                        {{select.Caption}}
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button type="button" 
        class="btn btn-secondary" 
        (click)='clear()'
        [disabled]='buttonDisabled'>
        Clear
    </button>
    <button type="button" 
        class="btn btn-secondary" 
        [disabled]='buttonDisabled'>
        Apply Filters
    </button>
</div>
</div>

but this code applies the width of 1000px to all the children. I want this on a specific modal. And as the modal-dialog class is a parent bootstrap class of modals, I can not access it from children, so I have written the CSS in the parent. I have tried to add css class of my that specific child but it is not working as expected. (See the following code). (PS - I haven't applied any css related to this in the child CSS).

Parent modified CSS:

::ng-deep .modal-dialog .filter {
    min-width: 1000px;
}

Answer 1

I was using modal-lg class for that specific modal so therefore I used following CSS in the Parent component.

::ng-deep .modal-lg {
    min-width: 1000px !important;
}