How do I get current ionic mode from code

Issue

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.

Solution

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");
  }
}

Answered By – sebaferreras

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published