Your welcome @semoju
Actually, this approach seems to cause animation issues in iOS, and probably is not what Ionic intend, although it does workā¦ Instead, from what I can see, the menu should be placed in the appās html (e.g. src/app/app.html) and controlled through Events.
This is a shame, as I liked the idea of keeping pages and their menus gathered together and code out of the /src/app/app.ts, but heyā¦
Hereās how I ended up coding it:
app.html
<!-- article menu -->
<ion-menu id="ArticleMenu" persistent="true" side="right" [content]="content">
<ion-scroll scrollY="true">
<ion-card class="background-image-card" *ngFor="let article of articleMenuArray; let i = index" (click)="articleMenuChange(i)">
<div class="card-image background-image-card__image-wrapper" [innerHTML]="article.post_image"></div>
<div class="background-image-card__titles">
<h2 class="card-title background-image-card__title">{{article.post_title}}</h2>
<h3 class="card-subtitle background-image-card__subtitle" [innerHTML]="utils.dateFromString(article.post_date)"></h3>
</div>
</ion-card>
</ion-scroll>
</ion-menu>
<ion-nav [root]="rootPage" swipeBackEnabled="false" #content></ion-nav>
app.components.ts
import { Component } from '@angular/core';
import { HomePage } from '../pages/home/home';
import { StatusBar, Splashscreen } from 'ionic-native';
import { Platform, Events, Nav, AlertController } from āionic-angularā;
@Component({
templateUrl: 'app.html'
})
export class MyApp {
private rootPage = HomePage;
private articleMenuArray = [];
constructor(public platform: Platform, public events: Events) {
platform.ready().then(() => {
console.log('platform ready. set status bar colour and hide splash now.', utils);
StatusBar.styleDefault();
Splashscreen.hide();
// setup menu subscription
this.setupArticleMenuSubscribe();
});
}
// article menu
setupArticleMenuSubscribe(){
console.log('setupArticleMenuSubscribe');
// sub scribe to the populate event of the menu
this.events.subscribe('articleMenu:populate', articleArray => {
this.articleMenuArray = articleArray;
});
}
articleMenuChange(index){
// notify any observers that an option has been clicked in the menu
this.events.publish('articleMenu:change', index);
}
}
In the page that does need a menu, you can add:
articles-page.ts
import { Component } from '@angular/core';
import { MenuController, Events } from 'ionic-angular';
@Component({
selector: 'articles-page',
templateUrl: 'articles.html'
})
export class ArticlesPage {
private articles;
constructor(menuCtrl:MenuController, public events: Events) {
this.articles = ['article 1', 'article 2', 'article 3', 'article 4', 'article 5']; // article data to populate menu in the app.html
}
// load page
ionViewDidLoad() {
// notify any observers that the data is ready to populate and pass it
this.events.publish('articleMenu:populate', this.articles);
// subscribe to the change event of the menu (an option being selected)
this.events.subscribe('articleMenu:change', (index) => {this.showArticle(index);});
// enable the menu on this page
this.menuCtrl.enable(true, 'ArticleMenu');
}
// unload page
ionViewWillUnload(){
// disable the menu when you leave this page
this.menuCtrl.enable(false, 'ArticleMenu');
}
showArticle(index){
// do something with the article here, e.g. display it
console.log('Show article:', this.article[index]);
}
}
I hope this helps someone out.
you saved my time !!!