Call a template html from pages folder in app.html angular 2

I would like to call the template configuration.html in my app.html, and it seems impossible to call an html template implemented in a child and call it in a parent page.

My architecture looks like this with ionic :slight_smile:

src
app
- app.component.ts
- app.html
- app.module.ts
pages
menus
- configuration.html
- menus.component.ts

configuration.html (I want to call this html in app.html):
Note : if I put this code directly in app.html, I can build correctly my app and it works.

<ion-menu persistent="true" [content]="content" side="left" id="menuParameter">
    <ion-header>
        <ion-toolbar color="default">
            <ion-title>Configuration</ion-title>
        </ion-toolbar>
    </ion-header>

    <ion-content>

        <ion-list>


            <ion-item>
                <ion-label>Mode1</ion-label>
                <ion-toggle color="energized"></ion-toggle>
            </ion-item>

            <ion-item>
                <ion-label>Mode2</ion-label>
                <ion-toggle color="danger" [(ngModel)]="isToggled" (ionChange)="notify()"></ion-toggle>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-menu>

menus.component.ts :

import { Component } from '@angular/core';
import { Logger } from '../../app/logger.service'
import { HttpClient } from '@angular/common/http';
import { NavController, NavParams, MenuController } from 'ionic-angular';
import { Events } from 'ionic-angular';



@Component({
  selector: 'configuration-component',
  templateUrl: 'configuration.html'
})

/**
 * Contain link with 
 */
export class MenusPage {
    constructor(){}
}

so far so good, now let’s me introduce the parent page app.html

<configuration-component></configuration-component>   <!--if a put the html above here, it works ! but not when i call the template configuration-component weirdly-->

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

Finally app.component.ts i use this :

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HomePage } from '../pages/home/home';
import { MenusPage } from '../pages/menus/menus.component';
import { Events } from 'ionic-angular';




@Component({
  templateUrl: 'app.html'
})
export class AppComponent {
  rootPage:any = HomePage;
  


  constructor(public events: Events,platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {

      statusBar.styleDefault();
      splashScreen.hide();
      this.isToggled = false;
    });
  }
  



}




            
            


    

I would like to call the template configuration.html in my app.html.

My architure looks like this with ionic :



>src
  >app 
     - app.component.ts
     - app.html
     - app.module.ts
  >pages
    > menus
       - configuration.html
       - menus.component.ts
    
Expand snippet



configuration.html (I want to call this html in app.html):
Note : if I put this code directly in app.html, I can build correctly my app and it works.     



<ion-menu persistent="true" [content]="content" side="left" id="menuParameter">
    <ion-header>
        <ion-toolbar color="default">
            <ion-title>Configuration</ion-title>
        </ion-toolbar>
    </ion-header>

    <ion-content>

        <ion-list>


            <ion-item>
                <ion-label>Mode1</ion-label>
                <ion-toggle color="energized"></ion-toggle>
            </ion-item>

            <ion-item>
                <ion-label>Mode2</ion-label>
                <ion-toggle color="danger" [(ngModel)]="isToggled" (ionChange)="notify()"></ion-toggle>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-menu>

<ion-menu persistent="true" [content]="content" side="right" id="menuInformation">
    <ion-header>
        <ion-toolbar color="default">
            <ion-title>Menu2</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
    </ion-content>
</ion-menu>
Expand snippet



menus.component.ts : 



import { Component } from '@angular/core';
import { Logger } from '../../app/logger.service'
import { HttpClient } from '@angular/common/http';
import { NavController, NavParams, MenuController } from 'ionic-angular';
import { Events } from 'ionic-angular';



@Component({
  selector: 'configuration-component',
  templateUrl: 'configuration.html'
})

/**
 * Contain link with 
 */
export class MenusPage {
    constructor(){}
}
Expand snippet



app.html : 



<configuration-component></configuration-component>

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
Expand snippet



Finally app.component.ts i use this : 



import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HomePage } from '../pages/home/home';
import { MenusPage } from '../pages/menus/menus.component';
import { Events } from 'ionic-angular';




@Component({
  templateUrl: 'app.html'
})
export class AppComponent {
  rootPage:any = HomePage;
  


  constructor(public events: Events,platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {

      statusBar.styleDefault();
      splashScreen.hide();
      this.isToggled = false;
    });
  }
  
}

i really don’t see where my logic is wrong. But the build process failed without any indication where the logic is wrong. Any help please ?

Can you explain why this is insufficient?

Hi rapropos,

I want to organize my code in a better wad and to do so, I want to move a part of my code in a appropriate folder. Which basically, was easy to do with angular 1 but seems impossible with angular 2 because app.html is a parent file

The app.html is normally a starting location, usually for ‘Home’.

Would you not have that component called from the ‘Home’ page?
Obv you need the mention in your home.module.ts and within home.html itself.

See if you can make at least that work and if so you’re on to a winner.

Let us know how you get on.

I have a home.html which is called in app.component.ts as showed above.

export class AppComponent {
rootPage:any = HomePage;

This home.html (and .ts) are in the exact same plavce than configuration.html.

If a declare a selector in my menus.component.ts (configuration.html) then, I can call my selector in my home.html ! just declaring in my home.html my selector like so

<configuration-component></configuration-component>.

But i cannot call my selector in my app.html.

My conclusion is the following : it is not possible to execute a selector in the starting location (app.html) described in a “normal” child component. But I don’t understand why ? it is restricted by the framework or am I wrong ?

Thank for your help :slight_smile:

It’s up to you but if you wanna share your git repo for this I’m happy to take a look as my minds eye isn’t seeing what you have a problem with.

Hi,

thanks for your help :slight_smile:

Here is the git https://github.com/AlexParisDauphine/Ionic

Check please this file configuration.html, and uncomment

<!--<configuration-component ></configuration-component>-->

to replace the code above I want to replace by using a selector.

don’t hesitate to come back to me :slight_smile:

The Menu docs say:

To add a menu to an app, the element should be added as a sibling to the ion-nav it will belongs to.

When you embed it in a separate container, it’s no longer a sibling to the nav and will therefore not work.

To me it looks like you are treating your component more like a template - expecting variables declared in the parent to be available without being passed in.

Just working out how you’ve done this.

my only purpose was to migrate the code of each menu (I want to implement many) in a specific folder but I don’t want to let the code in my app.html. So in conclusion I have to let every time I create a menu this part

<ion-menu [content]="content" side="left" id="menuParameter"> ... </ion-menu>

in my app.html.

So i can only create my templates for the code in between .

Impossible to go around this problem in another way?

it’s a bit different to what you did but check it out…

ALSO - use .gitgnore, I had to download all the node_modules and www folders even though I didn’t need em.