Howto correctly nest a custom component in ion-content


#1

Hi all,

in our app we want to show a fab-icon on several pages. Therefore, in order to reuse it and not having to implement the markup and method called onclick several times, we want to move the icon to a custom component.

Creating and embedding the custom component works, in general (we have some already). However, the layout of page is destroyed when embedding the custom component for the fab-icon. “destroyed” either means that scrolling does no longer work or that the sub-component is not correctly layouted (e.g. it is behind a toolbar at the bottom of the page).

The markup of one of the pages (without custom component):

<ion-header>
  <pageheader (notifyParent)="onNotify($event)" [notifyChild]="notifyChild" [parent]="component"></pageheader>
</ion-header>

<ion-content>
<ion-card *ngFor="let news of newsList; let i = index;" (click)="newsTapped(news)">

  <ion-row>
    <ion-col width-25>
        <img src="assets/images/news_cat_{{i%4}}.jpg">
    </ion-col>
    <ion-col>
 

        <div class="date">
        {{news.location[0]}}, {{news.pubDate[0]}} 
        </div>

        <div class="headline">
        {{news.title[0]}}
        </div> 
  
  
    </ion-col>
  </ion-row>
</ion-card>

<ion-fab bottom right>
   <button ion-fab icon-only (click)="takePicture()">
     <ion-icon name="camera"></ion-icon>
   </button>
 </ion-fab>

</ion-content>

<ion-footer no-shadow>
<statusbar (notifyParent)="onNotify($event)" [notifyChild]="notifyChild" [parent]="component"></statusbar>
</ion-footer>

This works fine. However, when moving the code of the ion-fab to a separate component, that does not work. The adapted code of the page above:

<ion-header>
  <pageheader (notifyParent)="onNotify($event)" [notifyChild]="notifyChild" [parent]="component"></pageheader>
</ion-header>

<ion-content>
<ion-card *ngFor="let news of newsList; let i = index;" (click)="newsTapped(news)">

  <ion-row>
    <ion-col width-25>
        <img src="assets/images/news_cat_{{i%4}}.jpg">
    </ion-col>
    <ion-col>
 

        <div class="date">
        {{news.location[0]}}, {{news.pubDate[0]}} 
        </div>

        <div class="headline">
        {{news.title[0]}}
        </div> 
  
  
    </ion-col>
  </ion-row>
</ion-card>
<fabbar (notifyParent)="onNotify($event)" [notifyChild]="notifyChild" [parent]="component"></fabbar>

</ion-content>

<ion-footer no-shadow>
<statusbar (notifyParent)="onNotify($event)" [notifyChild]="notifyChild" [parent]="component"></statusbar>
</ion-footer>

Component template:

<ion-fab bottom right [hidden]="!showCamera">
   <button ion-fab icon-only (click)="takePicture()">
     <ion-icon name="camera"></ion-icon>
   </button>
 </ion-fab>

Components’ code:

@Component({
  selector: 'fabbar',
  templateUrl: 'fabbar.html',
  outputs: ['notifyParent'],
  inputs: ['notifyChild', 'parent']
})

export class FabBarComponent {

  showCamera = true;

  constructor(public platform: Platform,
    public navCtrl: NavController,
    public navParams: NavParams)
  {

  }

... some more code for the input and output variables...

}

I guess the difference to our other custom components (e.g. the statusbar or the pagegeader in the page above) is that the fabbar-component is embeded inside ion-content. What are we missing? Do we have to inherit from a certain class or do we have to embed the new component inside a certain tag?

Thanks, Thomas