Angular *ngfor with async pipe does not update DOM after api post request

Question

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.

App Component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title = 'promoapp';

  offers$:Observable<Offer[]>

  constructor(private offerservices : OffersService){}

  ngOnInit(): void {
    this.offers$ = this.offerservices.loadOffers()
  }

  onOfferSubmitted(offer:Offer){
    this.offerservices.PostRequest(offer);
    this.offers$ = this.offerservices.loadOffers()

  }
}

html

<app-offercreation (OfferSubmitted)="onOfferSubmitted($event)"></app-offercreation>
<app-offerdisplay *ngFor="let offer of (offers$ | async)" [offer]="offer"></app-offerdisplay>

Child Component

@Component({
  selector: 'app-offerdisplay',
  templateUrl: './offerdisplay.component.html',
  styleUrls: ['./offerdisplay.component.scss'],
})
export class OfferdisplayComponent implements OnInit {

  @Input()
  offer:Offer
  
  
  constructor() { }

  ngOnInit(): void {

  }

}

Thanks

Answer 1

I was able to solve it by modifying the onOfferSubmitted method and subscribing to the post request.

  onOfferSubmitted(offer:Offer){
    this.offerservices.PostRequest(offer).subscribe(()=>{
      this.offers$=this.offerservices.loadOffers()
    })