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