CODEWITHSUNDEEP
angular
Mel Pacheco
Mel Pacheco

Reputation: 799

close modal when clicking on overlay, and not the modal it self

I have a modal with an overlay when it's open. I have an event on the overlay to close the modal, but its close even if I click on the modal itself. im trying this, to only close when the overlay is clicked.

if (event.target.classList.contains('do-not-click-here'))

but I get this error.

Property 'classList' does not exist on type 'EventTarget'

Upvotes: 1

Views: 1549

Answers (1)

JayChase
JayChase

Reputation: 11535

I just had that problem. I used a template ref on the container for the modal and then checked for it being in the event.path whenever click was fired on the overlay.

template

    <div class="overlay" (click)="overlayClicked($event)">
      <div class="modal" #modal>
        <ng-content></ng-content>
      </div>
    </div>

component

    export class ModalComponent implements OnInit {
      @ViewChild('modal') modal: ElementRef;
      visible = false;

      constructor() { }

      ngOnInit() {
      }

      overlayClicked(event) {
        if(event.path.indexOf(this.modal.nativeElement) === -1){
          this.visible = false;
        }
      }
    }

Upvotes: 2

Related Questions