CODEWITHSUNDEEP
htmlangulartwitter-bootstrap
Arvind Chourasiya
Arvind Chourasiya

Reputation: 17422

How to open Bootstrap popup modal on anchor link click Angular

I have Angular application. I want to open a Bootstrap popup modal when user clicks on a link in the footer. Below is my Bootstrap modal code.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">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">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Below is footer.component.html file

<footer class="text-center text-lg-start bg-light text-muted fixed-bottom">
    <div class="text-center p-2" style="background-color: gray;">
      Copyright 2001-2022. All rights reserved. For internal use only.

      <a class="text-reset" data-toggle="collapse" 
      [attr.data-target]="'#exampleModalCenter'">Terms of Use | </a>
      <a class="text-reset" href="https://mdbootstrap.com/">Privacy Statement</a>
    </div>
</footer>

Where do I need to keep the modal code, in footer.component or separate component? How can I open this when user clicks anchor link Terms of Use in the footer ?

I am using these versions:

"bootstrap": "5.2",
"@angular/core": "^14.2.0"

Upvotes: 2

Views: 1190

Answers (2)

Arvind Chourasiya
Arvind Chourasiya

Reputation: 17422

This is how I fixed it, First add nb bootstrap to your project

ng add @ng-bootstrap/ng-bootstrap

If you are getting errors while adding ng bootstrap. First run below command then try above commnad.

npm config set legacy-peer-deps true

Now in the footer.component add below code

<footer class="text-center text-lg-start text-muted fixed-bottom">
    <div class="text-center p-2" style="gray;">
      Copyright 2001-2022. All rights reserved. Confidential.

      <a class="text-reset" [routerLink]="" style="cursor:pointer;" data-toggle="collapse" 
      (click)="open(mymodal)">Terms of Use | </a>
      <a class="text-reset" href="https://mdbootstrap.com/">Privacy Statement</a>
    </div>
  </footer>

<!-- Modal -->

<ng-template #mymodal let-modal>
    <div class="modal-header">
        <h4 class="modal-title">Terms of Use</h4>
        <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
    </div>
    <div class="modal-body">
        
        <p>
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
            Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
        </p>
        <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet
            rutrum faucibus dolor auctor.
        </p>
        <p>
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
            Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
        </p>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-light" (click)="modal.close('Close click')">Close</button>
    </div>
</ng-template>

Add below code in footer.component.ts file

import { Component, OnInit } from '@angular/core';
import { ModalDismissReasons, NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {

  closeResult: string = '';
  constructor(private modalService: NgbModal) { }

  ngOnInit(): void {
  }

  open(content:any) {
    this.modalService.open(content, { scrollable: true, ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }
  
  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return  `with: ${reason}`;
    }
  }
}

When you click footer's Term of Use link, you will get model popup like below in your center of screen.

enter image description here

Upvotes: 2

Fabian Strathaus
Fabian Strathaus

Reputation: 3570

First of all, you seem to be using the bootstrap library for vanilla javascript and HTMl. You should consider switching to "Angular powered Bootstrap" (https://ng-bootstrap.github.io/#/) in order to use the benefits of angular. You will get the same components but will be able to inject different modules in your angular application.

After that you should create a new component containing the code of your popup modal.

Then you can inject NgbModal in your footer component like this: constructor(private modalService: NgbModal) {}

You can then open up the modal on button click using const modalRef = this.modalService.open(YourTermsOfUseComponent);

More information on how to open up modals from angular components can be found here: https://ng-bootstrap.github.io/#/components/modal/examples

Upvotes: 3

Related Questions