web-dev-qa-db-fra.com

directive angulaire 5 - modale

C'est la première fois que j'utilise Angular avec TypeScript. J'ai vraiment essayé de créer cette directive modale, inspirée de ngMorph .

Cela fonctionne bien comme prévu, mais je suis tombé sur un problème très étrange. Lorsque je clique sur le bouton pour ouvrir la boîte modale, cela fonctionne aussi bien et je ferme la boîte modale, elle se ferme. Lorsque j'essaie d'ouvrir à nouveau la même boîte modale et d'essayer de la fermer, elle ne se ferme pas. Et cela ne jette pas non plus d'erreur. 

Après le débogage, j'ai constaté que la classe modal-active dans le modal-button n'est pas supprimée.

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>

Voici mon code pour le 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');
        });
    }
}

Je sais que le code n'est pas parfait, je suis en train d'apprendre des choses et j'en ai déjà parlé. Je me demandais même d'utiliser jQuery mais je ne veux pas l'utiliser Angular, j'essaye de le faire de manière angulaire sans utiliser jQuery. Toute aide serait appréciée.

javascriptangularangularjs-directiveangular5
2
Unknown User

Pour modal dans Angular avec TypeScript, vous pouvez utiliser bootstrap . Vous pouvez trouver un exemple modal dans ce lien .. Cliquez ici !

1: Importez ModalModule dans votre module comme ci-dessous:

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

2: Ajouter la ligne ci-dessous dans votre fichier .html

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

C'est tout!

5
Saurav

Ceci est pour bootstrap 4.1.X et angulaire 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');
  }
}
0
Prakash Khadka