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