0
I’m using modal bootstrap for angular, as per the documentation, this is the way to use the framework. I am following exactly as in the example. Here’s a bit of my code:
<ng-template #modalcontent let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Editar equipamento</h4>
<button
type="button"
class="close close-button"
aria-label="Close"
(click)="modal.dismiss('Cross click')"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- FORM E OUTROS CONTEUDOS -->
</div>
</ng-template>
Button that drives the modal:
<a
(click)="open(modalcontent, equipment)"
class="waves-effect teal lighten-4 btn"
>Editar</a
>
To open the modal in mine component.ts:
open(content, equipment?) {
this.modalService
.open(content, { ariaLabelledBy: "modal-basic-title" })
.result.then(
result => {
this.closeResult = `Closed with: ${result}`;
},
reason => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
}
);
}
And to close:
private getDismissReason(reason: any): string {
this.grainData = [];
if (reason === ModalDismissReasons.ESC) {
return "by pressing ESC";
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
return "by clicking on a backdrop";
} else {
return `with: ${reason}`;
}
}
My problem is that the modal does not look exactly like in the bootstrap example. In addition to using bootstrap, I am using Materialize css. Here’s the result of my code:
As shown in the photo, I can only close the modal by clicking on the area indicated. How can I open the standard bootstrap modal?
I think it may be a problem between materialize and bootstrap, but as viewed, I am using ng-template, according to bootstrap documentation.
You can comment on the Materialize code to see if it is actually affecting your modal. If it is affecting, then you can specialize your
css, adding more class, to your modal. If it is not the Materialize, you can look for what is affecting your modal through ainspeção. Just right click on the component and go toinspecionar. So you which elements, or which tags, are modifying it.– Victor Henrique