How can I Disable a Ionic element in the page.html file if a variable matches a string

Question

I want to disable this element for a few data classes:

<ion-item>
      <ion-label position="stacked">Url</ion-label>
      <ion-input type="text" value="{{data.url}}" [(ngModel)]="data.url" ></ion-input>
</ion-item>

I imagined it like this:

<ion-item [disabled]= if(this.ch === 'user' | 'todo' )> 
      <ion-label position="stacked">Url</ion-label>
      <ion-input type="text" value="{{data.url}}" [(ngModel)]="data.url" ></ion-input>
</ion-item>

or

<ion-item [disabled]="*ngIf= this.ch === 'user' | 'todo'"> 
      <ion-label position="stacked">Url</ion-label>
      <ion-input type="text" value="{{data.url}}" [(ngModel)]="data.url" ></ion-input>
</ion-item>

ch is a variable which contains the name of the currently used dataclass -> for dataclass user and todo this item should be disabled

How can I achieve this?

P.S. If this is not possible in a similar way please let me know anyways.

Answer 1

you only need to put the condition in the disabled (no if, no ngIf)

<ion-item [disabled]="ch === 'user' || ch ==='todo'" >