I know this might be a really basic question but i’m getting started with ionic2 and a bit stumped…
I have built an app using the sidemenu starter template, added a few pages, but I want to make my sidemenu look nicer with some nice ionicons. But I simply cannot figure it out and googling is getting me nowhere.
Here is snippet from my app.html:
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
And here is the pages object this menu is driven off from app.component.ts
Thanks for response Pedro, but I can see a couple of problems
your example looks like ionic/angular 1 … i am working with ionic2
I cannot figure out how to display a working menu item button without using the pages array. If i could hard-code each menu item that would be great, but i need an example because i can’t get it working
Ok, so the first thing I tried was making rows and cols using the grid system. Didn’t work.
Tried using the item-icon-left class and didn’t work either…
So I went simple:
<ion-item>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
<ion-icon name="add-circle"></ion-icon> {{p.title}}
</button>
</ion-item>
You can style it to make it look nicer, it’s one way to do it.
Now [quote=“chazwoza, post:3, topic:74654”]
I cannot figure out how to display a working menu item button without using the pages array. If i could hard-code each menu item that would be great, but i need an example because i can’t get it working
[/quote]
Ok seem to have it working like this below, small variation of what you suggested.
app.component.ts:
export class MyApp {
@ViewChild(Nav) nav: Nav;
rootPage: any = TabsPage;
pages: Array<{title: string, component: any}>;
pages2: any;
constructor(public platform: Platform) {
this.initializeApp();
// used for an example of ngFor and navigation
this.pages = [
{ title: 'Home', component: TabsPage },
{ title: 'Profile', component: ProfilePage },
{ title: 'Feedback', component: FeedbackPage },
];
this.pages2 = {
profilePage: ProfilePage,
homePage: TabsPage,
feedbackPage: FeedbackPage,
}
}
initializeApp() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
Splashscreen.hide();
this.auth.startupTokenRefresh();
});
}
openPage(page) {
// Reset the content nav to have just this page
// we wouldn't want the back button to show in this scenario
this.nav.setRoot(page.component);
}
}
I am newly try to start in Ionic. I have seen In Ionic 2 only the default icons can use. Is there any way to add my custom icons or images for side menu template table view lists.
