@Output from directive will print in parent but cannot update a value in parent component

Question

parent.component.html

  <div draggable (dragging)="copyDragging($event)">{{copyBoxDragging}}</div>

parent.component.ts

copyDragging(event) {
    console.log('copyDragging :', event); // good
    this.copyBoxDragging = event; // not reflected in html
}

draggable.directive

@Output() dragging = new EventEmitter();
mousedrag$.subscribe(() => {
    if (!this._dragging) {
        this.dragging.emit(true);
        this._dragging = true;
    }
});

The Problem

See the console.log in parent.component.ts ? It is alway correctly prints the expected value. but assigning to a value in parent component (next line) does not reflect in parent html

is there something preventing me from assigning the emitted value in the parent component?

Answer 1

try to force change detection

constructor(private ref: ChangeDetectorRef) {
}

copyDragging(event) {
    console.log('copyDragging :', event); // good
    this.copyBoxDragging = event; // not reflected in html

    this.ref.detectChanges();
}