Pass variable to a component

Question

I'm trying to pass a variable commentEdit from viewbook.component.ts to tinymce.component.ts, but it receives a wrong value.

The problem is that "comment" in tinymce.component.ts always receives an empty string ' '.

When I do click on the span, commentEdit gets a new value, but it dont update the value on the other component.

How can I do that?

viewbook.component.ts

...
export class ViewBookComponent implements OnInit {
    public commentEdit= '';
    public comment='';
    ...
    keyupHandlerFunction(bookComment) {
        this.comment = bookComment;
    } 

    openModalEdit(comment) {
        this.commentEdit = comment;
    }
    ...
}

viewbook.component.html

...
<span (click)="openModalEdit(comment.comment)" data-toggle="modal"...></span>
...
<tinymce
    [elementId]="'edit-comment-book'"
    [plugins]="['link', 'paste']"
    [comment]='commentEdit'
    (onEditorKeyup)="keyupHandlerFunction($event)"
>
</tinymce>
...

tinymce.component.ts

export class TinymceComponent implements AfterViewInit, OnDestroy {
    @Input() comment: String;
    ...

Thanks!

Edit: I have solved it using ngOnChanges() Tinymce Angular 2 integration : how to set the content of the editor?

Have you logged comment.comment value? How do you get it ? is it an input enter? — Vega
"<div *ngFor="let comment of comments..." the span is inside, so there are some spans. I put a console.log() inside openModalEdit() and the value is right there — José Manuel
This one, simplified, works : stackblitz.com/edit/angular-iry36z?file=app%2Fapp.component.ts — Vega
I tried with <h1></h1> and it works properly. My problem was with tinymce but I have solved it. Thanks! — José Manuel

Franklin Pious Franklin Pious · Accepted Answer · 2017-09-16T21:18:56

if you are trying to access the value on html template , trying using getter and setter . Can provide more info if needed.

Pass variable to a component

1 Answers