Simple modal dialog in Angular

Question

I want to show a simple bootstrap dialog. My link is as following:

<td style="width:40px;"><a data-toggle="modal" data-target="#imagesModal" class="btn btn-sm btn-primary" href="#"><i class="fa fa-image"></i></a></td>

And modal:

<div class="modal fade" id="imagesModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Images</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>
          </div>
        </div>
      </div>
    </div>

Angular interprets the link as "http://localhost:4200". How do you just use a simple anchor for an bootstrap modal?

Answer 1

You try this.

component.ts

import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

constructor(private modalService: NgbModal) { }

open(content: any) {
    this.modalService.open(content, { centered: true, size: 'xl' });
}

component.html

<button class="btn btn-primary" (click)="open(content)">Click Modal Popup</button>

    <ng-template #content let-c="close" let-d="dismiss">
        <div class="modal-header">
            <h4 class="modal-title" id="modal-basic-title">Modal Title</h4>
            <button type="button" class="btn-close" aria-label="Close" (click)="d('Cross click')"></button>
        </div>
        <div class="modal-body">
            Content Area
            </div>
    </ng-template>

Reference: https://ng-bootstrap.github.io/#/components/modal/examples

Answer 2

I found a solution for it and added code snippets from my app.

So here is the full app: https://github.com/shivansh-max/PianshJewelryStore The main angular project is inside PianshJewelryStore. The other folders are some A.P.I projects for this project feel free to check them out !!!

I had to inject using a mat dialog. So for the mat-dialog, you need to install some dependencies. Here they are (you can install them using npm install):

• @angular/material
• @angular/platform-browser/animations

Then you will have to add it to a component by injecting it into the constructer:

  constructor(
        private sanitizer: DomSanitizer,
        public matDialog: MatDialog,
        private passer: PasserForModalService) {}

Open Modal Function:

  openModal() {

    const dialogConfig = new MatDialogConfig();
    // The user can't close the dialog by clicking outside its body
    dialogConfig.disableClose = true;
    dialogConfig.id = 'modal-component';
    dialogConfig.height = '350px';
    dialogConfig.width = '600px';

    this.passer.jewelry = this.jewelry;
    // console.log(this.passer.jewelry);
    

    // https://material.angular.io/components/dialog/overview
    const modalDialog = this.matDialog.open(
      VeiwElementModalComponent,
      dialogConfig
    );
    
  }

Where I pass VeiwElementModalComponent you will pass your own component.

Here is the constructer for the modal component:

  constructor(
      public dialogRef: MatDialogRef<VeiwElementModalComponent>,
      @Optional() @Inject(MAT_DIALOG_DATA) public data: any,
      public passer: PasserForModalService
  ) {}

Here is how you would close the modal:

  close() {
    this.dialogRef.close();
  }

Answer 3

Had provided a Demo Link so you can check it out

You can simply use Ngx-Bootstrap library which you can implement your modal in an angular implementation:

Home Module (home.module.ts)

import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
  declarations: [...],
  imports: [
    ...,
    ModalModule.forRoot(),
  ]
})
export class HomeModule {}

Home Component (home.component.ts)

import { Component, TemplateRef } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';

  @Component({
    selector: 'app-home',
    template: `
       <button class="btn btn-primary"
               (click)="openModal(template)">Open Modal</button>

      // Ng-Template Modal
      <ng-template #template>
          <div class="modal-header">

             // Modal Title 
             <h4 class="modal-title pull-left">Modal</h4>

             // Close Button 
             <button type="button" 
                     class="close pull-right" 
                     (click)="modalRef.hide()">
                 <span aria-hidden="true">&times;</span>
             </button>
          </div>

          <!-- Modal Body -->
          <div class="modal-body">
            This is a modal.
          </div>
     </ng-template>
    `
  })
  export class HomeComponent {
     modalRef: BsModalRef;

     constructor(private modalService: BsModalService) {}

     openModal(template: TemplateRef<any>) {
         this.modalRef = this.modalService.show(template);
     }

  }