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

Ionic Framework ionic-v3
1

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 ?

2

Can you explain why this is insufficient?

3

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

4

Screenshot from 2017-09-17 18:39:12
Screenshot from 2017-09-17 18:39:12.png1017Ɨ138 23.8 KB
Screenshot from 2017-09-17 18:38:29
Screenshot from 2017-09-17 18:38:29.png1320Ɨ142 20.9 KB

5

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.

6

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:

7

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.

8

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:

9

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.

10

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.

11

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?

12

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.