0

Problem

I have 2 child-components and 1 parent component. First child is a simple list of tasks, second is map with points that showing whole project(project have list of Tasks), i have lots of interactions with points on the map, and i need to bind array of tasks between components.

Main Component

HTML:

<app-tasks-list [(TasksList)]="Project.Tasks"></app-tasks-list>
<app-map [project]="Project" (onAddTaskModalClose)="addTaskToList($event)"></app-map>

TS: In Typescript file I only handle onAddTaskModalClose() event and getting project from http.

First child Component (list)

export class TasksListComponent implements OnInit {
  @Output() onTasksChange: EventEmitter<ProjectTask[]>;
  @Input()
  get TasksList() {
    return this.Tasks
  }

  set TasksList(TasksList: ProjectTask[]) {
    this.Tasks = TasksList;
    this.onTasksChange.emit(this.Tasks)
  }
  private Tasks: Array<ProjectTask> = [];
}

In HTML I'm using TasksList getter for displaying data, ProjectTask is a huge Model, and sometimes im only changing one of the values nested inside, which doesn't fire setter (but this is other next problem).

Second Component (map)

This is pretty simple component. Map that illustrate whole project and all of his points, and also i can add task from this component.

So i need a solution for passing Project.Tasks to one component (task-list-component is using in couple of places in my app) and when i change values of those tasks there, I need to show this changes on map instantly. Is there any simple way for this?

Konrad Straszewski
  • 109
  • 1
  • 10
  • So there is no way to do this without other service and Observables? – Konrad Straszewski Jul 28 '17 at 00:47
  • There are other ways - such as the `@Input` and `@Output` similar to what you have in your code or something like session storage. [See this question](https://stackoverflow.com/questions/39325503/how-to-pass-data-between-two-components-in-angular-2) however from the use case you have describe I think that a Subject (Observable) would be the best option – 0mpurdy Jul 28 '17 at 00:51
  • 1
    Just FYI, `Output` is always an `EventEmitter`, and `EventEmitter` is a sub-type of `Subject`, which in turns implements `Observable` interface. So yeah it's gonna be hard to find a solution without the use of `Observable`. – Harry Ninh Jul 28 '17 at 01:10

0 Answers0