Call a template in another component with angular 2

Question

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 

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> 

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(){} } 

app.html :

 <configuration-component></configuration-component> <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; }); } } 

app.module.ts

 @NgModule({ declarations: [ AppComponent, MenusPage, ], imports: [ BrowserModule, FormsModule, HttpClientModule, IonicModule.forRoot(AppComponent) ], bootstrap: [IonicApp], entryComponents: [ AppComponent, MenusPage ], providers: [ StatusBar, SplashScreen, Geolocation, {provide: ErrorHandler, useClass: IonicErrorHandler} ] }) export class AppModule {} 

any help please ?

Answer 1

Add a selector to MenusPage

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

Use it to include it in the app component HMTL

<configuration-component> </configuration-component>

Points to Remember

• These component should be declared under declarations of the respective module

• If they are from multiple modules, ensure that component is exported from its parent module

• Selectors should be unique across the application.