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

mamichels · Accepted Answer · 2020-03-04T15:00:49.940

3

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>

edited Mar 04 '20 at 15:00

answered Mar 04 '20 at 14:49

mamichels

619
4
12

2

In addition to this it is also better practice to use triple equals in typescript, like *ngIf="showForm === true" or just do *ngIf="showForm" – canpan14 Mar 04 '20 at 14:50
Ohh. so I just can't use that eventEmitter data anywhere in the parent ? – Santosh Mar 04 '20 at 14:52
1

parent should know which child exactly emits – Smollet777 Mar 04 '20 at 14:55
in `app.component.ts line 25 {res: undefined}` it shows undefined. it should be false isn't it ? – Santosh Mar 04 '20 at 14:57
My bad, its $event instead of val. I've adjusted the answer and also changed the ngIf to strict equality as @canpan14 pointed out. – mamichels Mar 04 '20 at 15:02
Thanks for correcting it. Is `$event` a reserve variable from angular. I can't use anything inside it ? – Santosh Mar 04 '20 at 15:03
1

if i may https://stackoverflow.com/questions/37944199/what-exactly-event-object-do-in-angular-2 – Smollet777 Mar 04 '20 at 15:07
Thanks @Smollet777 – Santosh Mar 04 '20 at 15:20

Angular data passing child to parent not responding

1 Answers1