Question 260370 in Html Question posted in
Some basic documentation can be found here.

Html – Click of a button not working when clicked through modal in angular

I am working with modal popup in angular which involves a submit button in the modal popup. The modal popup calls from a parent component.
I have click event for the button which is for submit button but its not getting triggered.
It should log when I click on the submit button.
Modal Popup which has submit button

Parent html

 <p>Start editing to see some magic happen :)</p>
 <button (click)="openModal(modal)" >open modal</button>
 <app-modal #modal [active]="isActive"> </app-modal>

modal.component.html //Child component

    <div [hidden]="!active">
  
    <div class="modal-background">
    </div>
  
    <div  class="modal">
      <div class="modal-body">
       <h1>algun titulo</h1>
       <p>algun contenido</p>
       <button onSubmit="onSubmit()">
         Submit
       </button>
      </div>
    </div>
  
  </div>

modal.component.ts (child component)

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: [ './modal.component.css' ]
})
export class ModalComponent implements OnInit {
  @Input() active: boolean ;

  ngOnInit() {
   
  }

  openModal(value) {
    value.active = true
  }

  onSubmit(){
    debugger;
    console.log('submit--->');
  }

  closeModal(value) {
    value.active = false
  }

}
Tags:

2

Answers


  1. 0

    The problem is with how you’ve attached the click event to the button in the modal.component.html.

    You’ve used onSubmit="onSubmit()" on the button, but this syntax is more akin to traditional JavaScript or vanilla HTML. In Angular, you need to use (click) to bind to the click event.

    Here’s how you should change your button:

    <button (click)="onSubmit()">Submit</button>
    Login or Signup to reply.
  2. 0

    The onSubmit method should be called using the Angular event binding syntax. Also, there’s a missing event for the button.

    Update your modal.component.html as follows:

    <div [hidden]="!active">
  <div class="modal-background"></div>
  <div class="modal">
    <div class="modal-body">
      <h1>algun titulo</h1>
      <p>algun contenido</p>
      <button (click)="onSubmit()">
        Submit
      </button>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search