title: Angular 8 UI observable not triggering change detection - ChangeDetectionStrategy is set to default
body: <p>I have a container component with a service injected into it. The service contains an observable. In the container component's template, I am binding that observable to a child component's input property using an async pipe. Everything seems to work except that I must interact with the UI to get change detection to fire and display the data that was pushed through the observable.</p>
  
  <p>(by not updating I mean it seems that:  <code>&lt;ng-container *ngFor="let section of sections;"&gt;</code> in the child component html is not executing) </p>
  
  <p>I have tried many things including creating another observable in the parent component and relaying the data from the service through that observable - but this was just a troubleshooting measure and is very crufty. It had the same results I believe. </p>
  
  <p>Note:</p>
  
  <pre><code>1. The service is pulling data from a .net backend via a socket (SignalR).
  2. I am also using Angular Material's drag and drop library in this project.
  3. **This post seems very similar**, but I can't discern a cause or solution from it: https://stackoverflow.com/questions/48955143/subscribing-to-observable-not-triggering-change-detection
  4. I mention 3 because that person was using angular material's infinite scrolling library and I am using drag and drop. Maybe something in that library is interfering with change detection.
  5. There is no OnPush change detection anywhere in this project
  </code></pre>
  
  <p>Service:</p>
  
  <pre><code>export class DocumentCreationService {
  
    private library = new Subject&lt;DocumentSection[]&gt;();
    public library$ = this.library.asObservable();
  ...
    private registerOnServerEvents(): void {
  
    this.proxy.on('documentSectionsRetrieved', (result: DocumentSection[]) =&gt; {
          this.library.next(result);
      });
    }
  ...
    public retrieveDocumentSections = () =&gt; {
      this.proxy.invoke('getDocumentSections')
                .then(() =&gt; console.log("getDocumentSections completed"))
                .catch(err =&gt; console.error(err));
    }
  ...
  }
  </code></pre>
  
  <p>Container ts:</p>
  
  <pre><code>@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
  })
  export class HomeComponent {
  ...
    constructor(public documentCreator: DocumentCreationService) { }
  }
  </code></pre>
  
  <p>Container html:</p>
  
  <pre><code>&lt;document-section-library #library [hidden]="selectedView !== 'library'" [sections]="documentCreator.library$ | async" [connectedDropTargets]="dropTargets"&gt;
  </code></pre>
  
  <p>Child ts:</p>
  
  <pre><code>@Component({
    selector: 'document-section-library',
    templateUrl: './document-section-library.component.html',
    styleUrls: ['./document-section-library.component.scss']
  })
  export class DocumentSectionLibraryComponent {
  ...
    @Input()
    public sections: DocumentSection[];
  ...
  </code></pre>
  
  <p>Child html:</p>
  
  <pre><code>  &lt;div class="document-section-library__contentarea" cdkDropList id="sectionLibrary" #sectionLibrary="cdkDropList" [cdkDropListConnectedTo]="connectedDropTargets" [cdkDropListData]="sections" (cdkDropListDropped)="onDrop($event)"&gt;
  
      &lt;ng-container *ngFor="let section of sections;"&gt;
  
        &lt;ng-template [ngIf]="section.content &amp;&amp; section.content.length &gt; 0" [ngIfElse]="table"&gt;
  
          &lt;document-section-custom class="document-section" cdkDrag 
            [id]="section.id"
            [templateId]="section.templateId" 
            [name]="section.name" 
            [enabled]="section.enabled" 
            [content]="section.content"&gt;
          &lt;/document-section-custom&gt;
  
        &lt;/ng-template&gt;
  
        &lt;ng-template #table&gt;
          &lt;document-section-table class="document-section" cdkDrag 
            [id]="section.id" 
            [templateId]="section.templateId"
            [name]="section.name" 
            [enabled]="section.enabled" 
            [content]="section.content"&gt;
          &lt;/document-section-table&gt;
        &lt;/ng-template&gt;
  
      &lt;/ng-container&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p>I would like the UI to reflect the data pushed via the observable immediately, without my needing to click on something or otherwise interact with the UI.</p>
  
  <p>In this case I am trying to do this with an observable because I couldn't seem to get it working any other way either. </p>
  
  <p>Ultimately, what I would really like, is to just have an array of DocumentSection as a public property in the service, update that array via methods on the service, and have the change to the array reflected immediately. I am not sure I even really need an observable for that. I would love to have the property on the service act like a local property on the component. </p>
  
  <p>So two questions: </p>
  
  <ol>
  <li><p>What is going on with this change detection issue and how can I solve it?</p></li>
  <li><p>Why can't (or can) I, just create a public array on the service and bind that normally (not via an async pipe) and have it work in the same way it would if it were a public property on the container component?</p></li>
  </ol>