Angular data passing child to parent not responding

Question

I have a list of data in table from array and I am displaying form on the click on Add User button which is working fine.

But I also want to hide the form on click of cancel button which doesn't seem working. I followed the docs from angular regarding event emitter. The data is not transmitting to parent on click event.

I have created a demo. Please help.

Stackbliz demo

Answer 1

Your event is not attached to <app-add-user-form> but to <tr>. To make it work write it like:

      <tr *ngIf="showForm === true">
        <td colspan="3">
          <app-add-user-form (showUserForm)="hideUserForm($event)"></app-add-user-form>
        </td>
      </tr>