Issue
I have a another problem after implementing this solution in my android app.
How to use different admob methods in Ionic 6/Capacitor?
The solutions works when I switch from page to page, but not when I open a modal. I have a component called fabbuton and this is the code.
Fabbutton.html
<div class="fixed">
<ion-fab (click)="scrollToTop()" vertical="bottom" horizontal="end" edge slot="fixed">
<ion-fab-button class="toolbar-color" size="small">
<ion-icon name="arrow-up"></ion-icon>
</ion-fab-button>
</ion-fab>
</div>
Fabbutton.css
.fixed {
position: fixed;
bottom: 30px;
right: 0;
}
Fabutton.ts
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-fabbutton',
templateUrl: './fabbutton.component.html',
styleUrls: ['./fabbutton.component.scss'],
})
export class FabbuttonComponent {
@Output('onClick') onClick = new EventEmitter<any>();
scrollToTop() {
this.onClick.emit();
}
}
This is my admob service code:
import { Injectable } from '@angular/core';
import { Platform } from '@ionic/angular';
import { AdMob, BannerAdOptions, BannerAdSize, BannerAdPosition, BannerAdPluginEvents } from '@capacitor-community/admob';
@Injectable({
providedIn: 'root'
})
export class AdMobService {
private appMargin: number = 0;
constructor(private platform: Platform) {
this.init();
}
async init() {
await this.platform.ready();
await AdMob.initialize({
requestTrackingAuthorization: true,
initializeForTesting: true,
}).catch(err => console.error('Could not init Admob', err));
AdMob.addListener(BannerAdPluginEvents.SizeChanged, (info: any) => {
// Subscribe Change Banner Size
this.appMargin = parseInt(info.height, 10);
if (this.appMargin > 0) {
const app: HTMLElement = document.querySelector('ion-router-outlet');
app.style.marginBottom = this.appMargin + 'px';
}
});
}
async bannerAd(admobId: string) {
const options: BannerAdOptions = {
adId: admobId,
adSize: BannerAdSize.FULL_BANNER,
position: BannerAdPosition.BOTTOM_CENTER,
margin: 0,
isTesting: true,
npa: true
};
await AdMob.showBanner(options).catch(err => console.error('Could not init Admob banner', err));
}
}
So when a add appears the fabbuton goes a little up like this:
When I open a Modal the fabbutton component goes behind the add like this:
In every page it works well, but only in the modal pages it doesn't add the margin bottom.
I have tried to overrule the CSS with the !important tag but still no luck.
How can I have the marginbottom in the modal like the other pages?
Solution
I have a solution! This is a working example for me:
Fabbutton.html
<div class="fixed" [style]="'bottom:' + bottom + 'px'">
<ion-fab (click)="scrollToTop()" vertical="bottom" horizontal="end" edge slot="fixed">
<ion-fab-button class="toolbar-color" size="small">
<ion-icon name="arrow-up"></ion-icon>
</ion-fab-button>
</ion-fab>
</div>
Fabbutton.ts
@Input('bottom') public bottom = 30;
And call the selector like this:
<app-fabbutton bottom="100" (onClick)="scrollToTop()"></app-fabbutton>
Answered By - Fearcoder
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.