0

Estoy haciendo una app y estoy en el paso básico. Necesito que cuando la pantalla llegue al breakpoint de mobile ( max-width:600px ) Se renderice otro componente, si no, entonces se rendericen las demás vistas. No está funcionando, el mobileQuery.matches en cualquier dimensión queda en false

Tengo esto en app.component.ts

import { ChangeDetectorRef, Component } from '@angular/core';
import {MediaMatcher} from '@angular/cdk/layout';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'maho';
  mobileQuery: MediaQueryList;
  private queryListener: () => void;

  constructor( changeDetector: ChangeDetectorRef, media: MediaMatcher ) {
    this.mobileQuery   = media.matchMedia('max-width: 600px');
    this.queryListener = () => changeDetector.detectChanges();
    this.mobileQuery.addEventListener('change', this.queryListener);
  }

}

Y este es el código de app.component.html

<ng-container *ngIf="this.mobileQuery.matches">
  VISTA NO DISPONIBLE
</ng-container>
<ng-container *ngIf="!this.mobileQuery.matches">
  <router-outlet></router-outlet>
</ng-container>

Me estoy basando en este ejemplo de Angular Material que lo hace para un diseño distinto en su panel de navegación

2
  • Escuchar propuestas no seria una respuesta basada en opiniones?
    – gbianchi
    el 1 mar. 2021 a las 15:19
  • Tienes razón, ya lo quité el 1 mar. 2021 a las 15:21

1 respuesta 1

1

Tu propuesta es correcta, y AngularMaterial es la mejor opción, pero el único detalle es que te faltan los paréntesis para que funcione (max-width: 600px)

this.mobileQuery = media.matchMedia("(max-width: 600px)");
1
  • Ajaaaa. Hasta a un Senior se le van estas cosas. Gracias crack. el 1 mar. 2021 a las 15:24

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.