How to apply async pipe on observable in ng-container conditionally if some boolean is true in angular

Question

I have an http request that I subscribe to using angular's async pipe. The logic i need is that the async pipe to be added to the ng-container tag only if a certain condition is true. I tried the following code :

         <ng-container *ngIf="eventCode != 'ADD' ? this.tableObservable | async as detailData : true">
                    <ng-container *ngIf="this.dataTable">
        <tk-dynamic-table-versatile 
[metadata]="eventCode != 'ADD' ? detailData.payload.metadata : this.children[0].metadata" [data]="eventCode != 'ADD' ? detailData.payload.data : null"
                             #dynamictable1>
    </tk-dynamic-table-versatile>
        
              </ng-container>
                </ng-container>

I need the tableObservable to only have the async pipe if the string eventCode != 'ADD' , else i dont want any operations on tableObservable.

is there any way to add the async pipe to ng-container conditionally in angular?

looking forward for some insights on the best way to tackle this.

Answer 1

You can't conditionally bind to the async pipe using template syntax, it just doesn't support it. What you can do is subscribe to this.tableObservable conditionally in your component's logic, e.g:

ngOnInit(): void {
  if (this.eventCode !== 'ADD') {
   this.tableObservable.subscribe({
     next: (data) => {
       this.detailData = data;
     }
   });
  }
}