Ionic 2 - Reusable Component

Hi everyone,
In my Ionic2 App I have a logo-component I wish to include in all pages. I defined the component like this:

import { Component } from '@angular/core';
import { IONIC_DIRECTIVES } from 'ionic-angular';

  selector: 'logo',
  templateUrl: 'build/pages/logo/logo.html',
  directives: [IONIC_DIRECTIVES]
export class LogoPage {
  constructor() {


This is the html:

<ion-buttons left>
  <img src="img/logo-min.png" />

Then I’ve tried to include this component in other pages:

import {LogoPage} from "../logo/logo";

  templateUrl: 'build/pages/home/home.html',
  directives: [LogoPage]

And then the html:

  <ion-navbar >
    <ion-title >Title</ion-title>

The problem is that the html of my logo-component is put inside the toolbar-content class together with title tag:

<div class="toolbar-content">

What am I wrong?

1 Like

can you please explain what is your desired effect

from my assumptions

try to use the menuToggle attribute with your logo tag
likt this

    <mylogo menuToggle></mylogo>

That’s exactly what I was searching for!