Ionic list with button and checkbox in same line - ionic-framework

Question

I'm trying to have a ion-list with button and checkbox or radio at the end of the line.
That's my code without checkbox/radio:
<button ion-item (click)="editItem(i, item)">
<ion-avatar item-start>
<img [src]="item.photo" />
</ion-avatar>
<h2>{{item.name}}</h2>
<p>{{item.info}}</p>
</button>
It works and I can show any information about Item object.
If I add checkbox or radio my info disappear and the button click don't work (always checkbox change event trigger).
<button ion-item (click)="editItem(i, item)">
<ion-avatar item-start>
<img [src]="item.photo" />
</ion-avatar>
<h2>{{item.name}}</h2>
<p>{{item.info}}</p>
<ion-checkbox (ionChange)="fireEvent(i, $event)"></ion-checkbox>
</button>
How can I have a button and checkbox in same row ?

Answer 1

You can use the grid system to put elements on the same row:
<ion-grid>
<ion-row>
<ion-col>
<button ion-item (click)="editItem(i, item)">
<ion-avatar item-start>
<img [src]="item.photo" />
</ion-avatar>
<h2>{{item.name}}</h2>
<p>{{item.info}}</p>
</button>
</ion-col>
<ion-col>
<ion-checkbox (ionChange)="fireEvent(i, $event)"></ion-checkbox>
</ion-col>
</ion-row>
</ion-grid>
more info here:
https://ionicframework.com/docs/api/components/grid/Grid/