CODEWITHSUNDEEP
angularbootstrap-modal
Vishavjeet
Vishavjeet

Reputation: 381

Display Modal If condition is true in Angular?

I want to display the modal once the ticket is successfully generated only. When the user click the button "mybutton" it will open the modal only if there is no error.

ticket.components.ts

constructor(private _service: TicketService, private _idservice: SharedService) {
   }

generateTicket(){
    this._idservice.currentMessage.subscribe(message => this.userId = message)
    this._service.createTicketFromRemote(this.ticket, this.userId).subscribe(
      data => {
        console.log("response recieved");
        this.msg = "Ticket Successfully Generated";

        // code to display modal

      },
      error => {
        this.open_Modal = false;
        console.log("exception occured");
        console.log(error);

        // do nothing
      }
    )

  }

ticket.component.html


<button name="myButton" (click)="generateTicket()" class="btn btn-primary">Generate Ticket</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal Title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body"> 
        <p class="text-center">Modal Body</p>
      </div>
      <div class="modal-footer"> 
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-warning">Print</button>
        <button type="submit" class="btn btn-primary"  data-dismiss="modal" >Edit</button>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 9774

Answers (3)

dev_101
dev_101

Reputation: 331

You can simply use this line to open the modal from your .ts file

 $('#exampleModalLong').modal('show');

Also dont forget to declare the dollar sign '$', use this line just after your imports in the .ts file

declare var $: any;

Upvotes: 2

FedG
FedG

Reputation: 1301

The class modal has css property dispaly:none so you have to add dispaly: block property to show the modal.

Html

Add ngClass directive to conditionally add o remove showModal css class

div class="modal fade" [ngClass]="{'showModal': openModal}" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    .......
</div>

In ts.

generateTicket(){
    this._idservice.currentMessage.subscribe(message => this.userId = message)
    this._service.createTicketFromRemote(this.ticket, this.userId).subscribe(
      data => {
        console.log("response recieved");
        this.msg = "Ticket Successfully Generated";

        this.openModal = true; // <------ Like Jacopo Sciampi said

      },

For close the modal.

closeModal() {
   this.openModal = false;
  }

css 

.showModal {
   display:block;
}

Upvotes: 2

Jacopo Sciampi
Jacopo Sciampi

Reputation: 3453

You can use a simple ngIf to achieve this:

generateTicket(){
    this._idservice.currentMessage.subscribe(message => this.userId = message)
    this._service.createTicketFromRemote(this.ticket, this.userId).subscribe(
      data => {
        console.log("response recieved");
        this.msg = "Ticket Successfully Generated";

        this.open_Modal = true; // <------

      },
      error => {
        this.open_Modal = false;
        console.log("exception occured");
        console.log(error);

        // do nothing
      }
    )

  }

in the html, add the ngIf to the main modal div: 

<div *ngIf="open_Modal" class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal Title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body"> 
        <p class="text-center">Modal Body</p>
      </div>
      <div class="modal-footer"> 
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-warning">Print</button>
        <button type="submit" class="btn btn-primary"  data-dismiss="modal" >Edit</button>
      </div>
    </div>
  </div>
</div>

You can also wrap the main div into a ng-container with the ngIf there, instead of in the div, to make the code more clean:

<ng-container *ngIf="open_Modal">
<div  class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle">Modal Title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body"> 
            <p class="text-center">Modal Body</p>
          </div>
          <div class="modal-footer"> 
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-warning">Print</button>
            <button type="submit" class="btn btn-primary"  data-dismiss="modal" >Edit</button>
          </div>
        </div>
      </div>
    </div>
</ng-container>

Upvotes: 0

Related Questions