How to work with Dynamic ion-segment in ionic with active class.

What is ion-segment or segment?

Segments are a collection of related buttons displayed in a horizontal row. It can be placed inside of a toolbar or the main content. The functionality of the Ionic segment is the same as Ionic tabs, where you select the one tab that will deselect all other tabs.

So let's dive straight to coding guys.

Come to think of scenarios where you have a list of objects in an array coming from the server-side of your application and you want to be able to loop them on a segment in an ionic app, that seems hard right?

Like what we have an array of objects.

the other image above subcribe to an endpoint get that returns an array of objects also.

With above image i hope you have been able to have your array assigned to a variable.

Let's move further to the HTML Part.

We would break the above codes down into pieces. we go by looping out what we have in our sub_categories array, then we bind every of the select button value to an ngModel name category, Note we have a click event function called, selectTab.

Hope the process is getting more simpler? which i believe your answer to that is yes.

We have to find a way to display the detail of the specific segment button clicked.

you have the above code to target each selected segment button display there data when selected.

Thanks for Reading!
What do you think of this post? I feel like I had to write about it. Leave comment below and I'll get back to everyone!

See you in the next one ✌

You can follow me on Twitter https://twitter.com/femithz