This is my first time on Angular using typescript. I've been really trying hard to create this modal directive, inspired from ngMorph.

This are working fine as expected but I've run across a very weird issue. When I click on the button to open the modal box, it works just as fine and I close the modal box, it closes. When I try to open the same modal box again and try to close, it doesn't close. And it doesn't throw any error as well.

After debugging, I found that modal-active class in the modal-button is not getting removed.

HTML

<div class="modal-button edit-sample-modal" [appModal] data-modal="edit-sample-modal">Open Modal</div>

<div class="custom-modal" id="edit-sample-modal">
    <a href="javascript:void(0)" class="text-default">
        <i class="fa fa-close fa-fw close-modal"></i>
    </a>
</div>

Here's my code for the modal

import { Directive, ElementRef, AfterViewChecked, Input, HostListener } from '@angular/core';

@Directive({
    selector: '[appModal]'
})
export class ModalDirective implements AfterViewChecked {

    @Input()
    appModal: string;

    constructor(
        private element: ElementRef
    ) { }

    ngAfterViewChecked() {
        // function to go here
        this.initModalBox(this.element.nativeElement, this.element.nativeElement.getAttribute('data-modal'));
    }

    @HostListener('click') onclick() {
        this.initModalBox(this.element.nativeElement, this.element.nativeElement.getAttribute('data-modal'));

        const modalElement = document.getElementById(this.element.nativeElement.getAttribute('data-modal'));

        this.element.nativeElement.classList.toggle('modal-active');
        modalElement.classList.toggle('modal-open');
    }

    initModalBox(button: HTMLElement, modalDialog: string) {
        const trigger: HTMLElement = button;
        const triggerPos = trigger.getBoundingClientRect();

        const modalElement = document.getElementById(modalDialog);

        modalElement.style.top = `${triggerPos.top}px`;
        modalElement.style.left = `${triggerPos.left}px`;
        modalElement.style.height = `${triggerPos.height}px`;
        modalElement.style.width = `${triggerPos.width}px`;

        modalElement.style.position = 'fixed';

        const closeElement = modalElement.getElementsByClassName('close-modal')[0];

        closeElement.addEventListener('click', function () {
            modalElement.classList.toggle('modal-open');
            // this.element.nativeElement.classList.toggle('modal-active');
            document.getElementsByClassName(modalElement.getAttribute('id'))[0].classList.toggle('modal-active');
        });
    }
}

I do know the code is not perfect, I'm just learning things and I've e up with this so far. I was even wondering of using jQuery but I don't want to use it Angular project, I'm trying to make do it the angular way without using jQuery. Any help will be appreciated.

This is my first time on Angular using typescript. I've been really trying hard to create this modal directive, inspired from ngMorph.

This are working fine as expected but I've run across a very weird issue. When I click on the button to open the modal box, it works just as fine and I close the modal box, it closes. When I try to open the same modal box again and try to close, it doesn't close. And it doesn't throw any error as well.

After debugging, I found that modal-active class in the modal-button is not getting removed.

HTML

<div class="modal-button edit-sample-modal" [appModal] data-modal="edit-sample-modal">Open Modal</div>

<div class="custom-modal" id="edit-sample-modal">
    <a href="javascript:void(0)" class="text-default">
        <i class="fa fa-close fa-fw close-modal"></i>
    </a>
</div>

Here's my code for the modal

import { Directive, ElementRef, AfterViewChecked, Input, HostListener } from '@angular/core';

@Directive({
    selector: '[appModal]'
})
export class ModalDirective implements AfterViewChecked {

    @Input()
    appModal: string;

    constructor(
        private element: ElementRef
    ) { }

    ngAfterViewChecked() {
        // function to go here
        this.initModalBox(this.element.nativeElement, this.element.nativeElement.getAttribute('data-modal'));
    }

    @HostListener('click') onclick() {
        this.initModalBox(this.element.nativeElement, this.element.nativeElement.getAttribute('data-modal'));

        const modalElement = document.getElementById(this.element.nativeElement.getAttribute('data-modal'));

        this.element.nativeElement.classList.toggle('modal-active');
        modalElement.classList.toggle('modal-open');
    }

    initModalBox(button: HTMLElement, modalDialog: string) {
        const trigger: HTMLElement = button;
        const triggerPos = trigger.getBoundingClientRect();

        const modalElement = document.getElementById(modalDialog);

        modalElement.style.top = `${triggerPos.top}px`;
        modalElement.style.left = `${triggerPos.left}px`;
        modalElement.style.height = `${triggerPos.height}px`;
        modalElement.style.width = `${triggerPos.width}px`;

        modalElement.style.position = 'fixed';

        const closeElement = modalElement.getElementsByClassName('close-modal')[0];

        closeElement.addEventListener('click', function () {
            modalElement.classList.toggle('modal-open');
            // this.element.nativeElement.classList.toggle('modal-active');
            document.getElementsByClassName(modalElement.getAttribute('id'))[0].classList.toggle('modal-active');
        });
    }
}

I do know the code is not perfect, I'm just learning things and I've e up with this so far. I was even wondering of using jQuery but I don't want to use it Angular project, I'm trying to make do it the angular way without using jQuery. Any help will be appreciated.

• javascript
• angular
• angularjs-directive
• angular5

• data-modal="edit-sample-modal" if you see this is not the id you are targeting. The target element's ID is edit-item-modal. You can use hostlistener to close the modal dialog too. – Jai Commented Dec 11, 2017 at 6:29
• I'm sorry, that was my mistake, when I was changing the actual class name I forgot about that. My modal is all working fine when I open it for the first time, but for the second time when I open the modal, I'm not able to close it. modal-active is not getting removed though I've got a function to toggle the class closeElement.addEventListener – Unknown User Commented Dec 11, 2017 at 6:54

2 Answers 2

For modal in Angular with typescript one can go with bootstrap. You can find modal example in this link.. Click here!

1: Import ModalModule to your module as below:

import { ModalModule } from 'ngx-bootstrap';
@NgModule({
imports: [ModalModule.forRoot(),...]
})
export class AppModule(){}

2:Add below line into your .html file

<button type="button" class="btn btn-primary" (click)="staticModal.show()">Static modal</button>

<div class="modal fade" bsModal #staticModal="bs-modal" [config]="{backdrop: 'static'}"
     tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">Static modal</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="staticModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        This is static modal, backdrop click will not close it.
        Click <b>&times;</b> to close modal.
      </div>
    </div>
  </div>
</div>

Thats it!

This is for bootstrap 4.1.X and angular 6.0.X

modal.html

<!-- MODAL TRIGGER -->
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal" appModal>Launch Modal</button>

<!-- MODAL -->

<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal Title</h5>
        <button class="close" data-dismiss="modal" appModal>&times;</button>
      </div>
      <div class="modal-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde veniam harum magnam molestias dignissimos omnis
        architecto, quod, obcaecati dolorum debitis dolore porro qui, iusto quo accusantium voluptates pariatur illo.
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-dismiss="modal" appModal>Close</button>
      </div>
    </div>
  </div>
</div>

appModal.directive.ts

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[appModal]'
})
export class AppModalDirective {

constructor() { }

  @HostListener('click') modalOpen(){
    document.getElementById('myModal').classList.toggle('d-block');
  }
}