Why my menu and my page's title doesn't appear

To begin my project I created a new project with the normal command
ionic start myNewProject blank --v2 --ts
And…
ionic platform add android

  1. Firstly I wanted to change my theme in app.core.scss : I tested it with sucess, I’ve the style applied to my HTML

#app.variables.css :
rapidTheming:(
base: #bebe33,
contrast: #ffffff

#page1.html :
<button id="page1-add" class="button" (click)="ajouterRemplModal()" twitter>Ajouter</button>

  1. It worked so I’m sure it isn’t a problem with the theme using.
    I don’t know why the code doesn’t give me a menu neither a page’s title, it’s here :
    #app.html
    <ion-menu id=“menu” [content]=“content”>

    Menu :




    Gestion des remplissages



    Configuration




    <ion-nav [root]=“rootPage” #content swipeBackEnabled=“false”>

#app.ts
import { Component} from ‘@angular/core’;
import { MenuController, Platform, ionicBootstrap } from ‘ionic-angular’;
import { StatusBar } from ‘ionic-native’;
import { GestionRemplissages } from ‘./pages/gestionRemplissages/gestionRemplissages’;

@Component({
  templateUrl: 'build/app.html'
})
export class InitComp{
	rootPage: any = GestionRemplissages;
	constructor(public platform: Platform) {
	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();
	});
  }
}
ionicBootstrap(InitComp);

#gestionRemplissages.html


<button id=“gestionRemplissages-button1” (click)=“ajouterRemplModal()”>Add item

#gestionRemplissages.ts
import { Component } from ‘@angular/core’;
import { ModalController, NavController } from ‘ionic-angular’;
import { AjouterRemplissage } from ‘…/AjouterRemplissage/ajouterRemplissage’;
@Component({
templateUrl: ‘build/pages/gestionRemplissages/gestionRemplissages.html’,
})
export class GestionRemplissages{
constructor( public modalCtrl: ModalController ){}
ajouterRemplModal()
{
let modalAjouter = this.modalCtrl.create(AjouterRemplissage);
modalAjouter.present();

		modalAjouter.onDidDismiss((data: any[]) => {
			// Sauvegarder les changements effectués via l'UI
		});
	}
}	

#AjouterRemplissage.html
(…)

#AjouterRemplissage.ts
(…)

  1. Moreover, I don’t know why I must absolutly add this directives to display css style in HTML rendering :
    #app/theme/app.core.scss
    @import “…/pages/ajouterRemplissage/ajouterRemplissage”;
    @import “…/pages/gestionRemplissages/gestionRemplissages”;

  2. Other strange problem : the folder app/img/ who contents pictures isn’t duplicated in /www when I build the project with “ionic serve” . I taste that it’s not a regular build making !

It ok :blush: To be nice, I had to iterate (in each page) this code at beginning of App.html and in ALL the pages :

<ion-header>
  <ion-navbar style="background-color:#5353A7;">
    <button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title >title_of_page</ion-title>
  </ion-navbar>
</ion-header>

Now the title and the menu are both visible !

1 Like