Open new page when User Click on any item from ion-item

Question

Here is the codepen

1) I want to open new details page, when user click on item and want to show details of that clicked item in newly opened back.
2) On details page there would be "OK" button if user click on that button then it would be back to list page.
3) How Can i show marked circle icon on right side of the list item.

How Can I do this? I spent 2 hours but I have not found any working solution.

Please help me. I am new in ionic and angular js.

Answer 1

Add something like this to your css:

ion-list div ion-item i {
  float: right;
  position: relative;
}

You may need to add a line like:

top: -20px;

to tweak the positioning.

Answer 2

you should read about states and then create one for each element of you list and one for the list itself. After that all you need it's to call $state.go('nameOfState'); Not sure if there is a way to do it just with ionic itself...

Answer 3

Here is a workaround; Question 1) Add an onclick event to each ion-item which links up to a method to process the event. The callback will handle routing to the details page while appending the list page URL as a prop or as a route query parameter

Question 3) Ionic 5 + has this already in place. You can simply use the slot attribute to position items within the ion-item Here is a sample code that covers all the above

          <h4> {{ product.name }} ({{ product.sku }})</h4>

          <ion-row>
            <ion-col class="separator" size-md="4" size-xs="12">

              <small>Selling Price: {{ product.selling_price }}</small>
            </ion-col>
            <ion-col class="separator" size-md="4" size-xs="12">

              <small> Cost Price: {{ product.cost_price }} </small>

            </ion-col>

          </ion-row>
        </ion-label>
        <ion-buttons>
          <ion-button fill="clear" slot="end" @click="editProduct(product._id)">
            <ion-icon :icon="createOutline" slot="icon-only"></ion-icon>
          </ion-button>
          <ion-button fill="clear" slot="end" @click="deleteProduct(product._id)">
            <ion-icon :icon="trashOutline" slot="icon-only"></ion-icon>
          </ion-button>
        </ion-buttons>

      </ion-item>