onClick to subscribe to observable. Action expression cannot contain pipes

Hi I have a ShopItemComponent. I want it to take a function as an input so that when a button in shop-item.component.html is clicked, the function gets called. inside the function in shop-item.component.html is an observable, the function subscribes to the function:

removeShopItem(shopItemId) {
return this.removeShopItemFunction(shopItemId).subscribe();
}


the observable is defined in shop-item-big.component:

removeShopItem = (shopItemId: string): Observable<any> => {
return this.shopService.remove(shopItemId);
};


I heard that it's not ideal to call .subscribe() directly, a better way is to use async. I tried to modify the function in shop-item.component.ts to be like this

removeShopItem(shopItemId) {
return this.removeShopItemFunction(shopItemId);


and modified the shop-item.component.html to be like this

<button (click)="removeShopItem(shopItem.id)|async">



But the editor is complaining: Action expression cannot contain pipes

What's the right way to subscribe to an observable with an onclick? much help is appreciated! thanks!

shop-item.component.ts

@Component({
selector: 'shop-item',
templateUrl: './shop-item.component.html',
styleUrls: ['./shop-item.component.scss']
})

export class ShopItemComponent {
@Input() shopItemId;
@Input() removeShopItemFunction: (shopItemId: string) => Observable<any>;

removeShopItem(shopItemId) {
return this.removeShopItemFunction(shopItemId).subscribe();
}

}


shop-item.component.html

<div>
<ng-content select="[header]"></ng-content>
<button (click)="removeShopItem(shopItem.id)">
</button>
</div>
<div>
<ng-content select="[body]"></ng-content>
</div>


shop-item-big.component.ts

@Component({
selector: 'shop-item-big',
templateUrl: './shop-item-big.component.html',
styleUrls: ['./shop-item-big.component.scss']
})
export class ShopItemBigComponent {
@Input() shopItem: ShopItem;

constructor(
private readonly shopService: ShopService) {
}

removeShopItem = (shopItemId: string): Observable<any> => {
return this.shopService.remove(shopItemId);
};
}


shop-item-big.component.html

<shop-item [shopItemId]="shopItemId" [removeShopItemFunction]="removeShopItem ">
<div header>
<h2>Item Name</h2>
</div>
<div body>
<p>details</p>
</div>
</shop-item>

Continue reading...