Why value in child component is not changed after emit from parent?

Question

I have a parent component view-event-component within child component inside:

<app-visitor-component (message)="message($event)" [_event]="event"></app-visitor-component>

Inside view-event-component there is:

  public dataFromChild: any;

  message($event) {
      console.log($event);
      this.dataFromChild = $event;
  }

Template view-event-component is:

{{ dataFromChild }}

So, when I push data from parent to child using @Output I always get message in:

message($event) {
   console.log($event);
}

But variable is not showed (rendered) in template:

{{ dataFromChild }}

There are no errors and warnings.

I use last version of Angular and Mozilla Firefox

Answer 1

If you have:

changeDetection: ChangeDetectionStrategy.OnPush

Trigger manually changeDetection:

constructor(cd: ChangeDetectorRef) {}

triggerDetecton():void {
    this.cd.detectChanges();
}

You also should provide a StackBlitz to help us understand better

Answer 2

try like this in child:

message= new EventEmitter<Object>();
messagefunction(event) {
    this.messageEvent.emit(event);
}