Angular - условный щелчок с асин c трубой

Question

Я пытаюсь сделать элемент кликабельным, если переменная asyn c имеет значение true

    <li (click)='(isThisTrue$ | async) ? openModal() : false'>

Я получаю эту ошибку.

Ошибки синтаксического анализа шаблона: Ошибка синтаксического анализатора: невозможно указать канал в выражении действия

Что вы предлагаете?

Answer 1

Для элементов button и input простым решением было бы связать свойство disabled со значением asyn c. В данном случае вы можете связать свойство pointer-events CSS, чтобы элемент li не реагировал на события click:

<li (click)="openModal()" [style.pointer-events]="(condition$ | async) ? 'auto' : 'none'">

См. this stackblitz для демонстрации.

Answer 2

Не влияет на DOM:
Я имею в виду отсутствие побочного эффекта на DOM

<ng-container *ngIf="isThisTrue$ | async as isThisTrue">
 <li (click)='isThisTrue ? openModal() : {}'>
</ng-container>