Angular2 supported an if-condition via the *ngIf directive.

<div *ngIf="edit == false">
VIEW
</div>
<div *ngIf="edit == true">
EDIT
</div>


Since Angular2 v4, the ngIf directive was extended with an ‘then.. else..’ syntax, in which you can reference the identifier of the HTML tags to include.

<div *ngIf="edit; then editDiv else viewDiv"></div>
<ng-template #editDiv>
EDIT
</ng-template>
<ng-template #viewDiv>
VIEW
</ng-template>


Another way to control HTML input-tags to be editable or disabled, is to use the [attr.disabled] syntax.

<input [attr.disabled]="edit ? null : true">

When using Ionic2, this translates to the following code.

<ion-input [disabled]="!edit"><ion-input>

In the TypeScript component, then in the control the ‘edit’ boolean variable.

I use the [attr.disabled] syntax for instance to display a detail page of an object in view (Read) or edit (Create/Update) form, and adding a Delete option to the view modus to complete a CRUD option. This simplifies my application development, imo, cause now the navigation in my application is mostly from List to Detail pages.

See also: NgIf Else lands in Angular 2.x+/4.0, Ashish Singh (Dec 18, 2016)