#ionic2 Segments inside view?

Ionic Framework ionic-v3
1

Hi all, I’m revamping some of our themes (I’m one of the authors at ionicthemes.com) from ionic1 to #ionic2.

I’m unable to get this particular view with Ionic 2.

image
ionic_split-view-question-2.png1305×582 164 KB

The approach I followed with ionic 1 was simple, I just used one ion-nav-view inside other ion-view.

(routes)

.state('app.profile.posts', {
  url: '/posts',
  views: {
    'profileContent': {
      templateUrl: 'views/app/profile/profile.details.html'
    },
    'profileSubContent@app.profile.posts': {
      templateUrl: 'views/app/profile/profile.posts.html'
    }
  }
})

.state('app.profile.pics', {
  url: '/pics',
  views: {
    'profileContent': {
      templateUrl: 'views/app/profile/profile.details.html'
    },
    'profileSubContent@app.profile.pics': {
      templateUrl: 'views/app/profile/profile.pics.html'
    }
  }
})

(layout)

<ion-view class="profile-details" view-title="Profile">
  <div class="row profile-details-section">
    <!-- User image -->
    <!-- User bio -->
    <!-- etc -->
  </div>
  <div class="row profile-details-section split-actions">
    <div class="col user-interaction" role="tab">
      <!-- Button 1 (click)='app.profile.posts' -->
      <a ng-click="getUserPosts()">
        All Posts
      </a>
    </div>
    <div class="col user-interaction">
      <!-- Button 2 (click)='app.profile.pics' -->
      <a ng-click="getUserPics()" role="tab">
        Pics
      </a>
    </div>
  </div>
  <ion-nav-view class="profile-sub-views-outer" name="profileSubContent"></ion-nav-view>
</ion-view>

@brandyshea you mentioned something about using segments (https://twitter.com/brandyscarney/status/773612024714629120).
It’s a great idea, will try that.
Can you give me some more tips on which would be the best approach to pull the data when switching segments with angular 2/ionic 2?

2

There are going to be multiple different ways you can achieve this based on how you want to retrieve and display the data. So you could do something like this:

<ion-segment [(ngModel)]="segment" (ionChange)="updateUserData()">
  <ion-segment-button value="posts">
    All Posts
  </ion-segment-button>
  <ion-segment-button value="pics">
    Pics
  </ion-segment-button>
</ion-segment>

Then manipulate the data in the updateUserData() function:

updateUserData() {
  // This is an example of calling a function in a provider
  this.userData.getData(this.segment).then(data => {
    this.data = data;
  });
}

and then your bottom list would show the data:

<ion-list>
  <ion-item *ngFor="let d of data">
    {{ d }}
  </ion-item>
</ion-list>

So you would end up with something like:

<ion-content>

  <div>
    Top Div Content
  </div>

  <ion-segment [(ngModel)]="segment" (ionChange)="updateUserData()">
    <ion-segment-button value="posts">
      All Posts
    </ion-segment-button>
    <ion-segment-button value="pics">
      Pics
    </ion-segment-button>
  </ion-segment>

  <ion-list>
    <ion-item *ngFor="let d of data">
      {{ d }}
    </ion-item>
  </ion-list>

</ion-content>

You can use the value of the segment to change the styles of the item and what shows in the item. Or you could hide and show two different lists based on the segment value. It’s really up to you how you want to handle displaying the data.

Note: I didn’t run any of this code so there could be syntax errors. I recommend checking out our conference app for some real usage examples: https://github.com/driftyco/ionic-conference-app. The pages/schedule directory has a similar use case.

We also have a site for learning more about Angular 2 if you are just getting started: http://learnangular2.com/

Hope that helps! :slight_smile:

3 Likes
3

Awesome. Thank you so much!

1 Like