title: Angular *ngfor with async pipe does not update DOM after api post request
body: <p>The offers$ observable is being pushed to Child component via async pipe and *ngfor. When it gets updated via post request, changes are not being rendered at the DOM. If I use an array and subscribe to get request insted of using and observable with async pipe it works...don't know why.</p>
  <p>App Component.ts</p>
  <pre><code>@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
  })
  export class AppComponent {
    title = 'promoapp';
  
    offers$:Observable&lt;Offer[]&gt;
  
    constructor(private offerservices : OffersService){}
  
    ngOnInit(): void {
      this.offers$ = this.offerservices.loadOffers()
    }
  
    onOfferSubmitted(offer:Offer){
      this.offerservices.PostRequest(offer);
      this.offers$ = this.offerservices.loadOffers()
  
    }
  }
  </code></pre>
  <p>html</p>
  <pre><code>&lt;app-offercreation (OfferSubmitted)=&quot;onOfferSubmitted($event)&quot;&gt;&lt;/app-offercreation&gt;
  &lt;app-offerdisplay *ngFor=&quot;let offer of (offers$ | async)&quot; [offer]=&quot;offer&quot;&gt;&lt;/app-offerdisplay&gt;
  </code></pre>
  <p>Child Component</p>
  <pre><code>@Component({
    selector: 'app-offerdisplay',
    templateUrl: './offerdisplay.component.html',
    styleUrls: ['./offerdisplay.component.scss'],
  })
  export class OfferdisplayComponent implements OnInit {
  
    @Input()
    offer:Offer
    
    
    constructor() { }
  
    ngOnInit(): void {
  
    }
  
  }
  
  </code></pre>
  <p>Thanks</p>