Como bloquear la orientación de una app con ionic

Hola a todos, hoy os voy a comentar como bloquear la orientación de una app con ionic.

En algunas aplicaciones o zonas de nuestra aplicación querremos bloquear la orientación de nuestro dispositivo, es decir, que el usuario no pueda cambiar esa orientación. Os recomiendo usar este plugin nativo.

Tengo un tutorial con más información sobre el tema.

Como instalar plugins nativos en ionic

Sino sabes crear un proyecto en ionic, te dejo otro tutorial.

Crear un proyecto IONIC

En este tutorial, voy a usar ionic 6 que ya viene con capacitor, por lo que voy a realizar los siguientes comandos:

Vamos al fichero app.module e importamos en providers ScreenOrientation:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, ScreenOrientation],
  bootstrap: [AppComponent],
})
export class AppModule {}

Usaremos el componente home que nos trae por defecto con la plantilla blank.

Veamos el template.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Bloquear pantalla
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">

  <ion-grid>
    <ion-row>
      <!--Texto informativo-->
      <ion-col size="12">
        <ion-text>No puedes cambiar la orientacion hasta que no pulses este boton</ion-text> 
      </ion-col>
      <!--Boton para desbloquear la pantalla-->
      <ion-col size="12">
        <ion-button (click)="unlockScreen()">Desbloquear</ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>

</ion-content>

Simplemente, con un ion-grid con un texto y un ion-button para desbloquear la pantalla.

Ahora vamos con el typescript.

import { Component } from '@angular/core';
import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';

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

  constructor(
    public screenOrientacion: ScreenOrientation
  ) {
    // Bloqueo la pantalla de forma horizontal
    this.screenOrientacion.lock(this.screenOrientacion.ORIENTATIONS.LANDSCAPE);
  }

  /**
   * Desbloquea la pantalla y hace que se pueda girar
   */
  unlockScreen(){
    this.screenOrientacion.unlock();
  }
}

Inyectamos el servicio ScreenOrientacion y con el metodo lock indicándole la orientación que queremos bloquear, tenemos todas las orientaciones aquí.

Puedes acceder a todas las orientaciones desde el el servicio inyectado.

Cuando queremos desbloquear la pantalla, lo haremos con unlock.

Este es el resultado final:

Os dejo aquí el código para descargar.

Recuerda que si quieres saber más de Ionic, tengo un curso en udemy muy completo donde te enseño paso a paso todo sobre Ionic realizando aplicaciones.

Aprende IONIC 6 con proyectos prácticos udemy

Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.