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

Answer 1

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