Search code examples
angularionic-frameworkionic2

Ionic reuse header in other pages

I am trying to reuse my HTML header for other pages in an Ionic 4 app.

My code is as follows. I have:

header.html

<ion-view>
<ion-grid>
        <ion-row>
            <ion-col col-6 class="font">
                <ion-avatar item-start>
                <img src="../../assets/imgs/ppc_logo.svg">
                </ion-avatar>
            </ion-col> 
            <ion-col col-6 class="header_font">
            <p>BUILDER'S APP</p>
            </ion-col>  
        </ion-row>
</ion-grid>
</ion-view>

Home.html

<ion-view>
 <ion-content>
  <header> </header>
 </ion-content>
</ion-view>

I want to use this again as possibly a directive in other pages instead of copying the entire code in every page.

Please assist

Solution

  • That's exactly what components are used for. Use the snippet of HTML that you want to reuse as component's template, and give the component a descriptive selector. Then you're ready to re-use it!

    @Component({
  selector: 'my-reusable-component',
  template: `<div>template goes here </div>`
})
export class ReusableComponent { }

    You can read more about Angular components in the official documentation.