angular 5 - modal directive

Question

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 come 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.

Solution

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!

Comments

[Unknown User]

Hey, thanks! I know about the bootstrap modal, the reason why I've created it this way, I'm doing a morphing effect. If I'm going to do it with bootstrap, I'll again have to write those function to set the position of the element.

[Inigo]

@Saurav Hey, did you ever solve this? I would also love to have an Angular 5 version of ngMorph

[Saurav]

@Inigo Hey,sorry i have not tried.Actually have not used ngMorph