CODEWITHSUNDEEP
angularangular2-componentsangular2-output
user6277510
user6277510

Reputation:

Calling method on Template variables giving "undefined" exception

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 enter image description here

<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?

Upvotes: 1

Views: 502

Answers (1)

Aravind
Aravind

Reputation: 41571

Mistakes

  1. You cannot call the child component method like

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

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

Solution

  1. 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;

  2. Modify your method call in the <movecopy> as below 

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

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

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

Upvotes: 0

Related Questions