Skip to content

Capacitor first steps

Marc Pascual edited this page Jun 16, 2020 · 7 revisions

First steps

To use the plugin see the following implementations. Keep in mind that the ids used in the example are for Android dev tests. If you do not replace them use the isTest option.

Stencil

import { Component } from '@stencil/core';
import { Plugins } from '@capacitor/core';
import { AdMobAdsPlugin, IAdMobAdsOptions } from 'admob-capacitor';

@Component({
    tag: 'app-home',
    styleUrl: 'app-home.css',
    shadow: false,
})
export class HomePage {

    private adMobAdsPlugin: AdMobAdsPlugin;

    async componentWillLoad() {
        this.adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
        await this.adMobAdsPlugin.createBannerView({ bannerAdId: 'ca-app-pub-3940256099942544/6300978111' });
    }
}

Angular

import { Component, OnInit } from '@angular/core';
import { Plugins } from '@capacitor/core';

@Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {

    private adMobAdsPlugin: AdMobAdsPlugin;

    async ngOnInit() {
        this.adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
        await this.adMobAdsPlugin.createBannerView({ bannerAdId: 'ca-app-pub-3940256099942544/6300978111' });
    }
}

React

import React, { Component } from 'react';
import { AdMobAdsPlugin } from 'admob-capacitor';
import { Plugins } from '@capacitor/core';

export default class HomePage extends Component {
    private adMobAdsPlugin: AdMobAdsPlugin;

    constructor(props: any) {
        super(props);
        this.adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
    }

    async componentDidMount() {
        await this.adMobAdsPlugin.createBannerView({ bannerAdId: 'ca-app-pub-3940256099942544/6300978111' });
    }

    render() {
        return 'your page content';
    }
}

Integrate capacitor admob plugin "Angular" is referring to Angular2 version and up, for AngularJS (Angular1) see this example