ng-include for sidemenu in ionic 3.20.0

Question

I've been trying to figure out how to re-use items in different pages without copy and pasting them. I thought I'd start with something easy and make the header menu a separate file that I ng-include. Little did I know... here's the header.html file:

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
     <ion-icon name="menu"></ion-icon>
    </button>
  <ion-title>List</ion-title>
 </ion-navbar>
</ion-header>

The framework was made with ionic start sample-app sidemenu. The header.html file is in /pages/common/ folder. To include this I've tried all of these.

<ion-header ng-include="'header.html'">
</ion-header>

<ion-header ng-include="'../common/header.html'">
</ion-header>

<ion-header ng-include="'pages/common/header.html'">
</ion-header>

<ion-header ng-include src="'pages/common/header.html'">
</ion-header>

<ion-header>
  <div ng-include src="'pages/common/header.html'"></div>
</ion-header>

<ion-header>
  <div ng-include="" src="'pages/common/header.html'"></div>
</ion-header>

and possibly a dozen other variations that I've found in different docs, blogs, SO posts, etc (I tried them separately of course). I tried it with the tag in the header file, and without. I tried wrapping the content in tags as well. Nothing seems to work. Can anybody tell me what works for them in this scenario?

Perhaps I'm going in the wrong direction and I should be looking at making a custom menu component?

TIA, Mike

`ng-include` is an angularjs feature.. ionic 3 uses angular 4+ https://stackoverflow.com/questions/39328215/angular2-dynamic-template-or-ng-include — Suraj Rao, Jun 02 '18 at 04:56
Thanks. Your link was just what I needed. I took advantage of the simple answer for the header, but the more complex ones creating dynamic components on the fly will be useful down the road as things be more involved. — Mike, Jun 02 '18 at 16:52

Mike · Answer 1 · 2018-06-03T12:16:40.097

Thanks to Suraj Rao I was able to come up with this, the simplest solution admittedly.

`ionic generate component custom-menu'

custom-menu.html:

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>{{pagetitle}}</ion-title>
  </ion-navbar>
</ion-header>

custom-menu.ts:

import { Component, Input } from '@angular/core';

@Component({
   selector: 'custom-menu',
   templateUrl: 'custom-menu.html'
})

export class CustomMenuComponent {

   @Input() pagetitle: string;

   constructor() {
   }
}

The {{pagetitle}} in the html and the @input pagetitle: string are used to pass data into the component. Again, the simplest way. When you create your very first component there will be a components.module.ts file created and the component you created will be imported there. Since I was using an ionic item in the component I had to add the import of IonicModule to that module. Add it at the top in an import statement and in the array of imports in the @NgModule

components.mdoule.ts:

import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular'; // ADDED THIS
import { CustomMenuComponent } from './custom-menu/custom-menu';
@NgModule({
   declarations: [CustomMenuComponent],
   imports: [IonicModule], // AND THIS
   exports: [CustomMenuComponent]
})
export class ComponentsModule {}

This is the menu component and I want it available from all pages so I import it into app.module.ts

import { ComponentsModule } from '../components/components.mdoule';

@NgModule({
   declarations: [... declarations already there ],
   imports: [
      BrowserModule, 
      ... // other modules already there
      ComponentsModule
   ],

So then it's available to all pages and I just have to put in this at the top of the html

<custom-menu pagetitle="Hello World Page"></custom-menu>

That's all the minimal pieces for making a component work in ionic 3.20 :)

Mike

ng-include for sidemenu in ionic 3.20.0

1 Answers1