0

Quiero implementar el < mat-tab-group > de Angular material. Me interesa obtener el tamaño de pantalla para poder cambiar el valor de su atributo mat-align-tabs="center". En pantallas pequeñas se use el "center" y en pantallas MD en adelante usar el "end".

Código HTML sin tocar

<mat-tab-group mat-align-tabs="center">
  <mat-tab label="Inicio">
    <app-inicio></app-inicio>
  </mat-tab>
  <mat-tab label="Explorar">
    <app-explorar></app-explorar>
  </mat-tab>
  <mat-tab label="Cuentas">
    <app-cuentas></app-cuentas>
  </mat-tab>
</mat-tab-group>

Código HTML de Módificado

<mat-tab-group attr.mat-align-tabs="{{posicion}}">
  <mat-tab label="Inicio">
    <app-inicio></app-inicio>
  </mat-tab>
  <mat-tab label="Explorar">
    <app-explorar></app-explorar>
  </mat-tab>
  <mat-tab label="Cuentas">
    <app-cuentas></app-cuentas>
  </mat-tab>
</mat-tab-group>

Código TS

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

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit {

  public posicion: string;

  constructor() {
    this.posicion = 'center';
  }

  ngOnInit(): void {
  }

}

La variable "posicion" es la que quiero cambiar su valor dependiendo el tamaño de pantalla.

1
  • No se si te sirva en angular, estimo que si, para obtener alto y ancho usa window.innerWidth y window.innerHeight Commented el 24 may. 2022 a las 11:14

1 respuesta 1

2

tienes dos Opciones. La primera es usar el @media de tu css/scss:

En la primera solucion dentro de tus archivos css/scss

.mat-align-tabs { align: end} 

 @media (max-width:991.98px) { 
    .mat-align-tabs { align: center } 
 }

La segunda y recomendada por Angular es usar el BreakpointObserver:

 import { BreakpointObserver, Breakpoints, BreakpointState } from '@angular/cdk/layout';
  .
  .
  .
export class exmapleBreakpoint {

 public sizeDisplay: string = 'phone' || 'web';

 constructor(
  public breakpointObserver: BreakpointObserver
 ){
    this.mediaQuery();
 }
  .
  .
  .
  public mediaQuery() {

    this.breakpointObserver
    .observe(Breakpoints.Small)
    .subscribe((state: BreakpointState) => {
      if (state.matches) {
      //AQUI SERA TRUE SOLO SI ESTA EN RESOLUCION DE CELULAR
      this.sizeDisplay = 'phone';
    }
  });

  this.breakpointObserver
  .observe(Breakpoints.Web)
  .subscribe((state: BreakpointState) => {
    if (state.matches) {
      //AQUI SERA TRUE SOLO SI ES RESOLUCION PARA WEB
      this.sizeDisplay = 'web';
    }
  });
 }

}

Aquí creas una variable public sizeDisplay: string = 'phone' || 'web' y usando el BreakpointObserver obtienes un observable que siempre te dirá el valor actual de la pantalla y lo seteas a la variable. Posee diferentes configuraciones, trae valores preestablecidos (Web - Small...), pero tambien puedes configurar respuestas especificas para una resolucion unica.

Lee su docu y entenderás mucho mas: https://material.angular.io/cdk/layout/overview

Éxitos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.