Pass data from a component to a modal dialog in angular 4

Question

I have an angular 4 application and I have 2 components a timeline and a modal dialog. When I double click on the timeline I want to open the modal dialog with the datas passed into the double click function.

So, in the timeline.component.ts, I have :

        Timeline.prototype.onTaskDoubleClick = function(task){
            console.log("Double click on task" + task.id);
            console.log(task);
            $('#addProjectForm').click();
        }

How can I do to pass the object 'task' from this function to the modal component ?

Check this [**answer**](https://stackoverflow.com/questions/42735858/ng2-bootstrap-show-hide-modal-as-child-component/42736058#42736058) — Aravind, Jul 07 '17 at 12:05
Could you provide the call to the modal dialog? (in your component) — amin89, Jul 07 '17 at 12:05
I have used an `@Input` property called `title` to pass the data to the modal. which you should be using to pass your data. — Aravind, Jul 07 '17 at 12:11

score 0 · Answer 1 · answered Jul 07 '17 at 12:15

0

Use @Input and @Output for the flow.

Create a component container, and two other containers timeline and modal

inject both timeline and modal in the container component.

Now on click in Timeline component use the following

clickEmitter = new EventEmitter<task: any>()

doubleClick(task: any) {
  this.clickEmitter.emit(task);
}

Now bind this output to the container component as follows

<timeline  (clickEmitter)="clickHandler($event)"></timeline>
<modal [task]="modalInput"></modal>

Now the task container can get this from the conatiner as follows.

In Container Component

modalInput: any;

clickHandler(task) {
  this.modalInput = task;
}

Now, this can be recieved by Modal component as follows,

@Input
task

answered Jul 07 '17 at 12:15

Ekansh Rastogi

2,418
2
14
23

In this : "Timeline.prototype.onTaskDoubleClick = function(task){ console.log("Double click sur la tache " + task.id); console.log(task); var clickEmitter = new EventEmitter(); this.clickEmitter.emit(task); }" I got the error "Cannot read property 'emit' of undefined" – Adrien Jul 07 '17 at 12:28
u need to change the method structure to angular version. No need to add method to the prototype, just call this method as plain angular click method. – Ekansh Rastogi Jul 07 '17 at 13:24
But I use an external library for the timeline and I want to show the modal dialog when I double click on the timeline. So, I need to do like this to catch the event. – Adrien Jul 07 '17 at 13:26

Pass data from a component to a modal dialog in angular 4

1 Answers1

In Container Component