Ionic 2 - Menu items, first item does not appear

Asked

Viewed 408 times

0

I created a Blank project in version 2 of Ionic, I added two pages keeping Homepage and Page1 and 2 and intending to show a list of the pages in the implemented menu in the code of the app.

import { HomePage } from '../pages/home/home';
import { Page1 } from '../pages/page1/page1';
import { Page2 } from '../pages/page2/page2';

@Component({
    templateUrl: 'app.html'
})

export class MyApp {
   @ViewChild(Nav) nav: Nav;

   rootPage: any = HomePage;
   pages: Array<{title: string, component: any}>;

   constructor(public platform: Platform) {
      this.initializeApp();

      this.pages = [
         { title: 'Home', component: HomePage },
         { title: 'Pagina Um', component: Page1 },
         { title: 'Pagina Dois', component: Page2 },
      ];
}

In app.html I created the menu and made use of ngFor to present the items

<ion-menu [content]="menuContent">
<ion-toolbar color="primary">
   <ion-title>Menu</ion-title>
</ion-toolbar>

<ion-content>
  <ion-list>
    <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
     {{p.title}}
    </button>

  </ion-list>
</ion-content>

</ion-menu>
<ion-nav [root]="rootPage" #menuContent></ion-nav>

The project is running, no error running however I have an array of three items to be listed only that only appears Page 1, and Page 2 or be the first of the list that would be Home does not appear

These are the first steps I take in Angular, Ionic who can give a help where I am making the mistake or if there is no error more the reason for Homepage does not appear

There is a detail, since the Homepage list does not appear so I removed it from the array, being now only with two elements the result is that my menu items now only shows Page 2, will have to do with some css that is "hiding" the first item or is it getting well above the first? see in the attached image that I have the three items "Buttons" and I inspected the second item but captured the image as I hovered over the first button in the HTML tab Inspencionando o elemento

Robson

ionic2

  • I made a menu just like yours yesterday and it worked. Did you see if Chrome looks right? See if this happens also if using Ionic serves --lab.

  • Hello André good night, it’s nothing in the browser, I found out what it is I’ll put the answer here, more my only worth your interaction ok, thanks was already apprehensive by no one have made even a comment rsrsrs.

1 answer

1

The problem is really that the first Item is up there on the page at the top what we could solve with css more not, this would not be the correct solution.

Whenever you have a Toolbar put it inside a header as below.

<ion-menu [content]="menuContent">
   <ion-header>
      <ion-toolbar color="primary">
         <ion-title>Menu</ion-title>
      </ion-toolbar>    
   </ion-header>

With this the Menu items are presented correctly.

Browser other questions tagged ionic2

You are not signed in. Login or sign up in order to post.