如何在新 url 上的 Angular 中删除模态打开 class？

Question

I have a bootstrap modal in which there is a button upon clicking it will route the component (where the modal is present) to another component(questions). The problem is occuring when the new component is loaded the modal-open class still remains in body tag. Is there any way to remove the modal-body ? Also if I click back to previous page the class still remains there.

modal code

<input type="submit" value="Submit" class="btn login-btn" [disabled]="profileForm.invalid" data-toggle="modal" data-target="#instructions">
<div class="modal fade" id="instructions" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalScrollableTitle">Instructions</h5>
            </div>
            <div class="modal-body">
                content written here
                <form action="">
                    <div class="form-row align-items-center">
                        <div class="col-auto my-1">
                            <div class="custom-control custom-checkbox mr-sm-2">
                                <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
                                <label class="custom-control-label" for="customControlAutosizing">
                                    To start, click the "Start" button. When finished, click the "Submit Quiz" button.
                                </label>
                            </div>
                        </div>
                        <div class="col-auto my-1">
                            <button type="submit" class="btn btn-primary" [routerLink]="['/questions']">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

I have written this css to override the main css but didn't worked:

.modal.fade .modal-dialog {
    -webkit-transform: translate(0, -25%);
    -ms-transform: translate(0, -25%);
    transform: translate(0, -25%);
  }

Also I tried to remove the fade class from the modal div.

Answer 1

in css put

.hide{
  display:none !important;
}

In your modal read display parameter

<div class="modal fade {{display}}" id="instructions" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">

then give a click event to your button

<button type="submit" class="btn btn-primary"(click)="goToQuestion()">Submit</button>

and in component import router

import { Router } from '@angular/router';

in costrunctor put router and create display parameter

display="";

constructor(private _router: Router) { }

and then write function

goToQuestion(){
   //here dismiss modal first then route
    this.display="none";
    this._router.navigate(['questions']);
}

Answer 2

In you submit button have data-dismiss="modal" and that should take care of the back drop