Angular data appears on console.log but not in the component view

Question

I am using Angular 9 and I have this code:

app.component.html

<br><br>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">

      <input #cmd />
      <button (click)="runCommand2(cmd.value)">runCommand</button>
      <br><br>


      RESULT: {{ output }}


    </div>
  </div>
</div>

Then in my app.component.ts

export class AppComponent {

  output: any;

  constructor(private myService: myService) {}

  runCommand2(command) {
    this.myService.executeShell2(command).subscribe(
      response => {
        if (response) { 
          this.output = response;
          console.log(this.output); // This appears in the console but does not appear in {{ output }} although the data is there
        }
      },
      error => {
        this.output = error;
      }
    );
  }

}

I also want to mention that for some reason if I call the method again, output will be populated on the view on the second time but not on the first time, although the data is there. Any ideas of what the problem could be?

are you using ChangeDetectionStrategy.OnPush? If yes then pls comment it out , then it should work. — Suraj Gupta, Jun 19 '20 at 14:01
No I'm not using ChangeDetectionStrategy.OnPush and there are no errors at all. — joe2020wow, Jun 19 '20 at 14:17
@joe2020wow check this: https://stackblitz.com/edit/angular-demo-service-gbhx2i working fine here — Prashant Pimpale, Jun 19 '20 at 14:37

ruth · Accepted Answer · 2020-06-19T14:27:33.197

Not sure why the change detection isn't triggered the first time. Try to trigger it manually using detectChanges() method.

import { Component, ChangeDetectorRef } from '@angular/core';

export class AppComponent {
  output: any;

  constructor(private myService: myService, private changeDetectorRef: ChangeDetectorRef) { }

  runCommand2(command) {
    this.myService.executeShell2(command).pipe(take(1)).subscribe(     // <-- use `take(1)` to complete after one notification
      response => {
        if (response) { 
          this.output = response;
          console.log(this.output); // This appears in the console but does not appear in {{ output }} although the data is there
        }
      },
      error => {
        this.output = error;
      },
      () => {
        this.changeDetectorRef.detectChanges();    // <-- trigger change detection here
      }
    );
  }
}

Angular data appears on console.log but not in the component view

1 Answers1