angular cannot receive emitted value

Question

I'm trying to emit value from DropdownComponent to TaskComponent:

DropdownComponent is located inside of NavBbrComponent (AppModule) and TaskComponent is in MainComponent which belongs HomeModule.

In DropdownComponent there is select definition:

<select class="form-control minimal" id="project" name="project" [(ngModel)]="selectedProject" (change)="onChange($event.target.value)">
  <option>Project 1</option>
  <option>Project 2</option>
</select>

with onChange method which emit value:

onChange(event) {
    this.toTask.emit(event);
  }

Value is binded in Main Component where is definition of the Task component

<app-task (toTask)="fromDropdown($event)"></app-task>

but there is no value in TaskComponent.

Stackblitz

coder · Accepted Answer · 2018-07-10T11:50:28.237

4

Because your DropdownComponent and TaskComponent components don't have any kind of a parent child relationship you have to use kind of a service to pass data between these components.

I just updated your DEMO and you could be found out solution there.

SAMPLE DEMO

edited Jul 10 '18 at 11:50

answered Jul 10 '18 at 11:37

coder

8,346
16
39
53

score 2 · Answer 2 · answered Jul 10 '18 at 11:23

Your approach is completely wrong. Events in Angular is not accessible via Output in components that are not contains them i mean that this one

<app-task (toTask)="fromDropdown($event)"></app-task>

means that you have toTask event inside app-task component and you can access it in you main-component.

Right approach to transfer data between components with that relation is to create service and emit values in navbar component to service, and listen them in your task component. You need to use Subject to solve that problem. There is a lot of answers on that down here.

angular cannot receive emitted value

2 Answers2