Ion-segment click

Ionic Framework Ionic Angular
1

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
2

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. 
}
3

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

5

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

6

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
7

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