Display datas on modal dialog in angular4 application

Question

I have a angular 4 application and I want to display datas in dialog. So, I use @Output to pass data from child to parent component.

So, in the parent component I have :

export class DashboardComponent {
    myTask;


    public returnTask(task: any):void {
        console.log("returnTask");
        this.myTask = task;
        console.log(this.myTask);
    }
    openDialogEditTask() {
        console.log(this.myTask);
        let dialogRef = this.dialogEditTask.open(DialogEditTask, {
            //task
            data:  {
                start: this.myTask.start,
                end: this.myTask.end,
                status: this.myTask.status,
                user: this.myTask.user,
                content: this.myTask.content,
                id: this.myTask.id,
                rate: this.myTask.rate
            }
        });
        dialogRef.afterClosed().subscribe(result => {
            this.selectedOption = result;
        });
}
}

In the parent html, I have :

<visTimeline (myTask)="returnTask($event)"></visTimeline>

In the child component, I have :

export class VisTimelineComponent {
    @Output() myTask: EventEmitter<any> = new EventEmitter<any>();
}

And I emit the task with self.myTask.emit(task);

So, I get the datas in the parent component (I can see them in the console) but I can't use them in openDialogEditTask because it's undefined.

So, do you know how can I get the datas before calling the function to have the datas in the dialog ?

EDIT : This is my code to emit datas in child component :

ngOnInit() {
    Timeline.prototype.onTaskDoubleClick = function(task) {
        console.log("Double click on task " + task.id);
        console.log(task);
        $('#editTask').click();
        self.myTask.emit(task);
    };
}

Timeline.prototype.onTaskDoubleClick is a function from a library.

Answer 1

I think you are not able to pass data into you modal component. try with componentInstance method.

    openDialogEditTask() {
        console.log(this.myTask);
        let dialogRef = this.dialogEditTask.open(DialogEditTask, {
            height: '90%',
            width: '80%'
        });
        dialogRef.componentInstance.myTaskValue = this.myTask; //<- passing data into DialogEditTask component
        dialogRef.afterClosed().subscribe(result => {
            this.selectedOption = result;
        });
}

in your DialogEditTask declare a variable myTaskValue: any;

you will get all your value you pass into DialogEditTask component in this myTaskValue variable