ionic - Adding a button inside a input field

I have something similar, a disabled input with an enabled icon button next to the input. Here is my HTML:

<ion-item>
    <ion-label floating>My Label</ion-label>
    <ion-input [disabled]="true" type="text" [(ngModel)]="MyModel"></ion-input>
    <button ion-button large clear (click)="doSomething()" item-end>
      <ion-icon name="search"></ion-icon>
    </button>
  </ion-item>

So in you case, this will work:

<ion-item>
    <ion-label>Your Label</ion-label>
    <ion-input type="text" [(ngModel)]="yourModel"></ion-input>
    <button ion-button large (click)="doSomething()" item-end></button>
  </ion-item>

item-left and item-right directional properties are deprecated according to https://ionicframework.com/docs/theming/rtl-support/


For ionic 4 it will look a bit different:

<ion-item>
 <ion-input type="password" placeholder="Password"></ion-input>
 <button clear slot="end">Forgot</button>
</ion-item>

Instead of left and right they introduced start and end values, which make it easier to build interfaces for both left-to-right and right-to-left writing directions


Fixed in the recent Ionic releases. Adding item-right on the button works.

<ion-item>
 <ion-input type="password" placeholder="Password"></ion-input>
 <button clear item-right>Forgot</button>
</ion-item>

Tags:

Css

Ionic2

Iconic