Ion-segment click

I would like to change the content of a div after click on the ion-segment.
Example:

<ion-segment value="default">
  <ion-segment-button value="default">
    <ion-label>Default</ion-label>
  </ion-segment-button>
  <ion-segment-button value="segment">
    <ion-label>Segment</ion-label>
  </ion-segment-button>
</ion-segment>

If I click in Default I want to show a list of motocycle, instead if I click on Segment shows a list of cars.
How can I do?

1 Like

use ionChange event on segment.

For example: <ion-segment value="default" (ionChange)="yourChangeEvt($event)">

yourChangeEvt(e){
e.detail.value = 'value received in event.' // coming from value attribute on segment button.
//your toggle condition for car / bike list. 
}

thank u sir, but it’s not completely clear. Can u make a complete example with also the array var?

I think that is the worse and unnecessary answer that a man can send.

How so? Your asking something that is very basic. Ionic provides examples in thier docs and the are many 3rd party tutorials as well. Explore solutions yourself, as it is a needed skill in software development. You wont learn anything if you ask people to do the work for you, especially something as basic as what your asking.

3 Likes

Stepping in here. I want to thank the members of the Ionic community (@najam92, @Hills90210, @mikrochipkid) for assisting with this question. Often times, routine questions with easily-discoverable answers are asked in the forum and on the Ionic Discord. While most Ionic developers are happy to point you in the right direction, asking for someone to provide a full code example for this type of question is not a good use of their time.

Perhaps this article can get you started on the right track: ion-segment: API Documentation for Segmented Controls

Good luck and please let us know if you were successful!

1 Like