See the full text version of the article here: https://medium.com/nycdev/create-an-angular2-ionic2-mobile-app-with-a-list-nested-detail-and-form-pattern-c03c9195dfa6
Category Archives: ionic
Ionic2: if … else … template blocks in Angular2
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)