0

my Ionic applications has a bottom tabs, where I can choice different tab/page. Each tab/page has different top tabs, but I want to keep the some header sections for the entire app, where on the right there is the Logo of the App and on the right an ion-avatar, where when I click on them I can choice different user. How Can I achieve this?

 <ion-header color="primary">
   <ion-item color="primary">
     <div width-50 item-start>
      <img src="assets/icon/myLogo.png">
    </div>
    <div width-50 item-end>
        <img src="assets/icon/avatar-icon.png">
      </div>
  </ion-item>


<ion-toolbar color="primary">
  <ion-segment [(ngModel)]="topTab"  (ionChange)="onTabChanged()">

   <ion-segment-button value="send" >
      <ion-icon color="light"  title="Invia" name="send">Invia</ion-icon>
     <ion-label>Invia</ion-label>
   </ion-segment-button>
   <ion-segment-button value="calendar" >
      <ion-icon color="light" title="Inviate" name="calendar"></ion-icon>
     <ion-label>Inviate</ion-label>
   </ion-segment-button>


 </ion-segment>
</ion-toolbar>
</ion-header>
<ion-content>...

How Can I achieve this? Also I'm not able to se the first image on the left and the second one on the right, where am I wrong?

I love coding
  • 1,183
  • 3
  • 18
  • 47

1 Answers1

1

You can create a custom header component and add the tag wherever you want.

For example:

@Component({
  selector: 'my-header',
  template: '<ion-header color="primary"> ... </ion-header>'
})
export class MyHeader{ ... }

and add <my-header> in the pages you want.

Regarding the images, you can use the grid system in Ionic.

<ion-grid>
  <ion-row>
    <ion-col>
      <img src="assets/icon/myLogo.png">
    </ion-col>
    <ion-col>
      <img src="assets/icon/avatar-icon.png">
    </ion-col>
  </ion-row>
</ion-grid>
yazantahhan
  • 2,950
  • 1
  • 13
  • 16
  • Thank you for your reply, but got this: core.js:9110 ERROR Error: Uncaught (in promise): Error: Template parse errors: 'app-my-header-user' is not a known element: 1. If 'app-my-header-user' is an Angular component, then verify that it is part of this module. 2. If 'app-my-header-user' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" – I love coding Oct 01 '19 at 20:25
  • You need to add your component (I believe it is names `MyHeaderUserComponent `) into the declaration property in your module. Something like: `declaration: [MyHeaderUserComponent]` – yazantahhan Oct 01 '19 at 20:31
  • Now it works, but I've to import the name of the module in each page. Is it possible to do it once, just in the TabsPage and not in each children page? – I love coding Oct 01 '19 at 21:07
  • Sure, you need to create a parent module like `SharedModule` and import it. You can check these answers for more info: https://stackoverflow.com/questions/41505392/how-to-declare-a-directive-globally-for-all-modules-in-angular https://stackoverflow.com/questions/53885076/make-module-global-available-in-angular-application https://stackoverflow.com/questions/41425482/angular-2-global-component – yazantahhan Oct 02 '19 at 09:18