DEV Community

Ajayi Oluwafemi Adeyinka
Ajayi Oluwafemi Adeyinka

Posted on

2

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?
carbon
Like what we have an array of objects.

carbon
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.

carbon-3

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.
carbon-5
you have the above code to target each selected segment button display there data when selected.
carbon-6

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

Image of Bright Data

Overcome Captchas with Ease – Keep your data flow uninterrupted.

Our Web Unlocker smoothly handles captchas, ensuring your data scraping activities remain productive.

Solve Captchas

Top comments (0)

The AI Copilot for All of Your Apps

Pieces.app image

The Pieces Copilot shadows your workflow, leveraging deep context from your entire toolchain for powerful coding conversations and real-time AI assistance right inside your IDE, browser and desktop app.

Try the secure, on-device productivity tool for free today.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay