CODEWITHSUNDEEP
angularionic-frameworkionic2ionic3
Suraj Bahadur
Suraj Bahadur

Reputation: 3928

Navigate Among The Custom Tabs Dynamically In Ionic

I was trying to create custom tabs and each one have their own sections. Tabs and sections are dynamically coming from server. Here is the link Tabs with html and I need same functionality with ionic 2 and want to alive element in DOM and I can't used *ngIf directive.

Here is what I have right now:

1.This is Json data

this.filterData=[
  {"key":"Budget","value":["10-100000"],"type":"bar","labelid":"17"},
  {"key":"Parking Capacity","value":["0-100","101-250",">251"],"type":"checkbox","labelid":"12"},
  {"key":"Venue","value":["Indoor","Outdoor","Indoor\/Outdoor"],"type":"checkbox","labelid":"3"},
  {"key":"No.of Rooms","value":["0-10","11-30",">31 "],"type":"checkbox","labelid":"15"},
  {"key":"Max.Capacity","value":["0-100"],"type":"bar","labelid":"1"},
  {"key":"Function Type","value":["Marriage","Engagement","Anniversary","Birthday","Cocktail","Corporate","Party"],"type":"checkbox","labelid":"11"}];

2.Left section: i have created the tabs

Right section: i have created div for each tabs

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col col-4 class="one">
        <ion-row *ngFor="let type of filterData">{{type.key}}</ion-row>
      </ion-col>

      <ion-col col-8 > 
          <ion-item *ngFor="let function of filterData">
            <div>{{function.labelid}}</div>
          </ion-item>
      </ion-col>
    </ion-row>
  </ion-grid>

and it is look like this enter image description here

i want to switch among this tabs and show corresponding div section.

Please help me to achieve this.

Upvotes: 0

Views: 220

Answers (1)

Pengyy
Pengyy

Reputation: 38189

Based on your requirement, You can use Segment to build a navigation button group.

And for showing corresponding div sections, just use a ngSwitch to control showing them based on selected segment value.

Since you want to keep the elements after switch, ngSwitch will remove hidden elements as the same with ngIf, you can use hidden to control showing corresponding div sections. (demo updated)

Refer sample demo.

Upvotes: 1

Related Questions