How do I get current ionic mode from code

user_4970212 0
Viewed 353

I am using Angular 9 together with ionic5 and I need to get the currently used mode (string md or ios which can be different from platform) from my typescript code. So my question is that if this is possible directly from typescript code without the need of reading it from the tag html mode attribute.

I tried to consult the official documentation on Platform styles, but this only considers usage inside CSS.

ionic5 ionic-framework angular
2 Answers

The easiest way to find these things is by taking a look at the Ionic's source code, specially the providers folder. There, I found the following file: https://github.com/ionic-team/ionic-framework/blob/master/angular/src/providers/config.ts

That file exposes the Config provider, that will expose the entire configuration of the app, including the mode.

Please take a look at this working Stackblitz demo

import { Component, OnInit } from "@angular/core";
import { Config } from "@ionic/angular";

@Component({
  selector: "app-home",
  templateUrl: "./home.page.html",
  styleUrls: ["./home.page.scss"]
})
export class HomePage implements OnInit {
  public mode: string;

  constructor(private config: Config) {}

  ngOnInit() {
    // Replace the mode in the app.module.ts
    // file to test this
    this.mode = this.config.get("mode");
  }
}
user_39154380

The Platform service can be used to get information about your current device. You can get all of the platforms associated with the device using the platforms method, including whether the app is being viewed from a tablet, if it's on a mobile device or browser, and the exact platform (iOS, Android, etc). You can also get the orientation of the device, if it uses right-to-left language direction, and much much more. With this information you can completely customize your app to fit any device.

For more information

user_105952070
Related