Ionic 2 - Menu items, first item does not appear

0

I created a blank project in version 2 of ionic, added two pages with HomePage and Page1 and 2 and intended to show a list of the pages in the menu implemented in the code of the app.component

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 display 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 running error however I have an array of three items to be listed only that it only appears Page 1, and Page2 or the first one in 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, the reason why HomePage does not appear

There is a detail, since in 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 show Page 2, does it have to do with some css that is "hiding" the first item or is it getting well above the first? see the attached image that I have the three items "Buttons" and I inspected the second item plus I captured the image when I hovered over the first button in the Html tab

Robson

    
asked by anonymous 28.01.2017 / 19:02

1 answer

0

The problem is really that the first item is there on top of the page at the top which we could solve with css but no, this would not be the correct solution.

Whenever you have a Toolbar place 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.

    
01.02.2017 / 01:24