Calling method on Template variables giving "undefined" exception

Question

I have one parent containing two child components.

AppComponent
     NotificationsComponent
     MoveCopyComponent

I want to emit values of MoveCopyComponent to NotificationComponent. Whenever I emit i get a property undefined in the NotificationComponent as shown in the screenshot

<notifications #notificationsMenu role="menuitem" dropdown-item 
       [caller]="'menu'" 
       (acceptShareFromMenuEvent)="shareAcceptModal.PinItem($event)"                                                                         
       (contentShareAccepted)="shareAcceptModal.hide()">
</notifications>

And down below we have declared a component which pops a modal to place the content.

<movecopy-item #shareAcceptModal 
    (shareAcceptedandPlaced) = "notificationItem.contentAccepted($event)">

</movecopy-item>

A button click in the modal(movecopy component) shareAcceptedandPlaced event is triggered by which I need to execute contentAccepted(..) method in my notifications component as below.

shareAcceptedandPlaced(){
       this.shareAcceptedandPlaced.emit(this.sharedItemPinnedInfo);     
}

What is happening here is that the notifications component contains the collection of the incoming components while the move-CopyItem is merely a selection component to place the incoming component.

When the #shareAcceptModal raises the "(shareAcceptandPlaced)" event for the "notificationItem's" contentAccepted() method, I get the following exception: "Cannot call contentAccepted on undefined. as in the above screenshot"

What am I doing wrong here?

Refine your post once to give clear information. I read your post and it does not convey exact information. I got a idea about your problem and I had one such situation. But need little more information. are you available in teamviewer? — Aravind, Feb 19 '17 at 07:59
Thanks Aravind, I have added a few more details. I am unavailable on TV, but available on Skype. — , Feb 19 '17 at 08:07

score 0 · Accepted Answer · answered Feb 19 '17 at 11:08

Mistakes

You cannot call the child component method like

(shareAcceptedandPlaced) = "notificationItem.contentAccepted($event)"

You are emitting a Output() variable which is not a child of notifications in your event shareAcceptedandPlaced()

Solution

Since you have AppComponent as a parent, you can use @ViewChild() for both the child components and access the properties and methods of your both child components as
```
@ViewChild(movecopyComponent) mcopyComp: movecopyComponent;
@ViewChild(NotificationsComponent) notificationMenu: NotificationsComponent;
```

Modify your method call in the <movecopy> as below

<movecopy-item #shareAcceptModal (shareAcceptedandPlaced)="myContentChanged()">
</movecopy-item>

You can have your myContentChanged() method to handle it as

myContentChanged() {
       this.mcopyComp.properties....
       let temp: {...};        
       this.notificationMenu.contentAccepted(temp);
}

Calling method on Template variables giving "undefined" exception

1 Answers1

Linked