CODEWITHSUNDEEP
javascripthtmlangulartypescriptmodal-dialog
BAvalos
BAvalos

Reputation: 55

"modal" is not recognized by Angular as an element

I created a component form my project using Angular; everything worked fine until I add a window and now nothing appears when I serve my app and Angular says "modal is not a known element".

HTML Document

<modal>
<div class="modal">
  <div class="modal-body">
      <h1>A Custom Modal!</h1>
      <p>
          Home page text: <input type="text" />
      </p>
      <button (click)="closeModal('custom-modal-1');">Close</button>
   </div>
</div>
<div class="modal-background"></div>
</modal>

Modal Component File:

 import { Component, OnInit, ElementRef, Input, OnDestroy } from 
    '@angular/core';
        import {ModalWindowService} from './modal-window.service';

       @Component({
        selector: 'app-modal-window',
      templateUrl: './modal-window.component.html',
       styleUrls: ['./modal-window.component.css']
       })

       export class ModalWindowComponent implements OnInit {
     @Input() id: string;
     private element: any;

         constructor(private modalService: ModalWindowService, private el: 
  ElementRef) {
  this.element = el.nativeElement;
   }

  ngOnInit(): void {
  let modal = this;

  // ensure id attribute exists
  if (!this.id) {
      console.error('modal must have an id');
      return;
       }

    // move element to bottom of page (just before </body>) so it can be 
     displayed above everything else
     document.body.appendChild(this.element);

   // close modal on background click
    this.element.addEventListener('click', function (e: any) {
      if (e.target.className === 'modal') {
          modal.close();
      }
     });

       // add self (this modal instance) to the modal service so it's 
    accessible from controllers
  this.modalService.add(this);
   }

        // remove self from modal service when directive is destroyed
          ngOnDestroy(): void {
     this.modalService.remove(this.id);
      this.element.remove();
     }

       // open modal
        open(): void {
     this.element.style.display = 'block';
       document.body.classList.add('modal-open');
           }

        // close modal
       close(): void {
         this.element.style.display = 'none';
        document.body.classList.remove('modal-open');
       }
     }

I use a HTML file for "Template" instead using it inside the component. I have declared that component in my module.

Upvotes: 3

Views: 1578

Answers (1)

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24424

Your selector name is app-modal-window

<app-modal-window>
<div class="modal">
  <div class="modal-body">
      <h1>A Custom Modal!</h1>
      <p>
          Home page text: <input type="text" />
      </p>
      <button (click)="closeModal('custom-modal-1');">Close</button>
   </div>
</div>
<div class="modal-background"></div>
</app-modal-window>

if you want to use it like <modal> change the selector like this

   @Component({
    selector: 'modal',
  templateUrl: './modal-window.component.html',
   styleUrls: ['./modal-window.component.css']
   })

Upvotes: 2

Related Questions