CODEWITHSUNDEEP
angularjsionic-framework
Jayesh
Jayesh

Reputation: 681

How to push a new page in to the <div> of current page in ionic

I have a menu list in the page and while clicking on the list , I want to push new pages inside of a tag in the current page.

can someone help me, I am new to ionic

Upvotes: 0

Views: 76

Answers (1)

Sergey Rudenko
Sergey Rudenko

Reputation: 9227

you need to leverage Ionic components that are designed for such use cases. Based on your description you need Segment: https://ionicframework.com/docs/components/#segment

The way you use it (see their example):

first you define the "menu"

<div padding>
  <ion-segment [(ngModel)]="pet">
    <ion-segment-button value="kittens">
      Kittens
    </ion-segment-button>
    <ion-segment-button value="puppies">
      Puppies
    </ion-segment-button>
  </ion-segment>
</div>

Please note “pet” in ngModel is variable you have in your component ts file that normally has value of default selection like: public pet:string = “puppies”

then you define what could be the content for each segment:

<div [ngSwitch]="pet">
  <ion-list *ngSwitchCase="'puppies'">
    <ion-item>
      <ion-thumbnail item-start>
        <img src="img/thumbnail-puppy-1.jpg">
      </ion-thumbnail>
      <h2>Ruby</h2>
    </ion-item>
    ...
  </ion-list>

  <ion-list *ngSwitchCase="'kittens'">
    <ion-item>
      <ion-thumbnail item-start>
        <img src="img/thumbnail-kitten-1.jpg">
      </ion-thumbnail>
      <h2>Luna</h2>
    </ion-item>
    ...
  </ion-list>
</div>

Now whenever user selects a segment from the menu - only that content will be shown. If in your case you need a custom content - do it, you don't have to use lists etc:

<div [ngSwitch]="pet">
  <div *ngSwitchCase="'puppies'">
    ...
  </div>

  <div *ngSwitchCase="'kittens'">
    ...
  </div>
</div>

Try this approach.

It is always better not to invent a new wheel and follow what framework gives to you out of box.

Upvotes: 1

Related Questions