It seems like I may be overlooking something, as I am experiencing an issue with adding a span to an Ion Item, where the span is not being rendered, nor is the div.
<ion-card>
<ion-card-title>
</ion-card-title>
<div>
<button ion-button (click)="toggleEdit()">Edit</button>
</div>
<ion-list>
<ion-card-content>
<ion-item [hidden]="editOptions.!isEditing">
<span class="inline-edit">Text</span>
<ion-label color="primary">{{label}}</ion-label>
<ion-input></ion-input>
<span class="inline-edit">{{value}} </span>
</ion-item>
<ion-item [hidden]="!editOptions.isEditing">
<ion-label color="primary">{{label}}</ion-label>
<ion-input [(ngModel)]="value" [required]="required" [type]="type" [name]="value"></ion-input>
</ion-item>
</ion-card-content>
</ion-list>
</ion-card>
While Ion label and Input are displaying and functioning properly, I am encountering difficulties when attempting to use a span or a div within an Item, as they are not being rendered. This is occurring even upon inspecting the elements in Chrome.
How can I display simple text? Am I prohibited from using HTML in a component? What is the Ionic 2 equivalent for rendering small amounts of text, considering that labels must always be placed over an input? Which component should I utilize in this case?