Ionic 2 - Reusable Component

Ionic Framework ionic-v3
1

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';


@Component({
  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" />
</ion-buttons>

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

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

@Component({
  templateUrl: 'build/pages/home/home.html',
  directives: [LogoPage]
})

And then the html:

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

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">
  <logo>..</logo>
  <ion-title>..</ion-title>
</div>

What am I wrong?

1 Like
2

can you please explain what is your desired effect

from my assumptions

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

<ion-header>
  <ion-navbar>
    <mylogo menuToggle></mylogo>
    <ion-title>About</ion-title>
  </ion-navbar>
</ion-header>
3

That’s exactly what I was searching for!