checking Ionic 4 Platform: Device Information

Ionic 4 platform

Ionic 4 provides the Platform service which provides you with information about the current device.

You can use the Platform service to get a lot of information which will help you customize your application for a specific environment or OS such as the browser, Android or iOS etc.

If you either want to check or detect the platform where your app is running or you want more information about the device such as the language direction or the device orientation you can use different methods available from the Platform service.

Now how to check for the host platform?

To check for the target platform you need first to import the Platform service

import { Platform } from 'ionic-angular'; 

Then check if the platform is ready and use the Promise source to get your platform.

All you need to do is to inject the Platform service on your constructor and call the platform.ready() method:

@Component({
templateUrl: 'app.html'
})
export class MyApp {
    rootPage = HomePage;

    constructor(platform: Platform) {
        platform.ready().then((source) => {
            console.log("platform source " + source);
        });
    }
}

You can also use the is(platformname) method to check for the platform. For example if you need to check if your app is running on the browser or on the device you just need to use the following code:

@Component({
templateUrl: 'app.html'
})
export class MyApp {
    rootPage = HomePage;

    constructor(platform: Platform) {
        platform.ready().then(() => {

            if (this.platform.is('android')) {
                console.log("running on Android device!");
            }
            if (this.platform.is('ios')) {
                console.log("running on iOS device!");
            }
            if (this.platform.is('mobileweb')) {
                console.log("running in a browser on mobile!");
            }

        });
    }
}

The Platform service has many more methods that you can use for customizing your app behavior depending on platform type and device conditions but the most used method is the ready() method which is used to detect if the target platform is ready and all device native functionality can be accessed safely.

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status