Create a dynamic segement


I want to create a dynamic segment.

This is my code:

<div padding>
              <ion-segment [(ngModel)]="preview">
                <ion-segment-button *ngFor="let segment of segments" value="{{}}" (click)="segmentChanged(">
            <div *ngFor="let segment of segments" [ngSwitch]="preview">
              <ion-list *ngSwitchCase="">
                  {{}} content.....

The problem is that value="{{}}" don’t change the preview variable when i click on the segement button.
The result is that the content of the segment is not displayed.

As workaround I add the click handler wich changes the preview variable and the content becomes visible.

But why does value="{{}}" not work?

Anny suggestion?

The issue lies outside of what you have posted. If I eliminate the (click) handler on the segment buttons, this code works as expected.

I tried it without the click handler first.

The problem is that the preview value dont change when the segment button is clicked.

Yes it does. I dropped that code directly into a sandbox project and the preview value changed and the {{}} changed with it. Whatever is going on is outside the scope of what you have posted here.

1 Like


I start with an empty segment array. Could this be the problem.

I post the rest of my code later.

@rapropos Thank you for your Support.

If the Segment Array has some initials items the init items works fine.
When I add a new item to my Segment Array the new item wont work.

I think the Problem is that it is not possible to add dynamicaly a case to the switchcase Statement.

For my preview function the click handler is a good work around.


When I use the ionChange Event like in the docs is this than the right way to handle it?

I don’t know if event:any is right? Or is there a special type for Events?

mySegment_changed(event: any){
	console.log("mySegment_changed ->" + event._value);
	// Add your code here

I haven’t found it to be consistent, and it’s not particularly well-documented. Oftentimes it is the component that has triggered the event.

I don’t know if you have already solved this problem but I came across with it today. And I found that you may use the element with some mistakes. To asign value attribute in a ngFor loop, you should write like [value]="" .