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