CODEWITHSUNDEEP
angulartwitter-bootstrapbootstrap-modalng-bootstrap
Happy Coder
Happy Coder

Reputation: 4682

NgBootstrap modal with correct style classes

I am using NgBootstrap in Angular for creating modals. In the HTML, I have the following template.

<div class="modal fade" role="dialog" tabindex="-1" id="add-item-modal">
    <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header wo-modal_update-address-header">
                <div class="d-flex align-items-center justify-content-center">
                    <img class="wo-modal_update-address-icon" src="assets/img/add.svg">
                     <h4 class="modal-title">Create Release</h4>
                </div>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
               </button>
            </div>
            <div class="modal-body">
                <div>
                    <form>

Now I am using the <ngtemplate> as follows :

<ng-template #release let-modal>
    <div id="add-item-modal">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header wo-modal_update-address-header">
                    <div class="d-flex align-items-center justify-content-center">
                        <img class="wo-modal_update-address-icon" src="assets/images/add.svg">
                        <h4 class="modal-title">Create Release</h4>
                    </div>
                   <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="modal.dismiss('Cross click')">
                       <span aria-hidden="true">×</span>
                    </button>
               </div>
               <div class="modal-body">
                   <div>

The modal is appearing, but the class modal-xl is not added correctly and therefore, the size of the modal is appears to be small. I have checked a few implementations of the NgBootstrap and for them, modal-content is added just after <ngtemplate>. But in that case how the classes can be added correctly ?

Upvotes: 0

Views: 640

Answers (1)

Eliseo
Eliseo

Reputation: 57939

it's when you open the pop where you indicate in options, the size, see the docs about open

this.modalService.open(MyComponent, 
    { scrollable: true, 
      size: 'lg' })

Upvotes: 1

Related Questions