Si encuentras algún fallo en tu código o trabajo, recuerda probar siempre en un entorno de testing antes añadir el código al proyecto final.

Solución:

Esta es una forma de hacerlo.

aplicación.componente.html

   Sidenav
   Open Sidenav

aplicación.componente.ts

import  Component, ViewChild, HostListener  from '@angular/core';
import MdSidenav from "@angular/material";

@Component(
    moduleId: module.id,
    selector: 'my-app',
    templateUrl: 'app.component.html'
)

export class AppComponent 
    @ViewChild('sidenav') sidenav: MdSidenav;

    @HostListener('window:resize', ['$event'])
    onResize(event) 
        if (event.target.innerWidth < 500) 
            this.sidenav.close();
        
    

Si está utilizando Angular Flex-Layout, puede utilizar el servicio MediaObserver y vincularlo a la propiedad abierta de mat-sidenav.

@Component(
selector: 'my-component',
template: `  
  
    
    
    ...        
  `
)
export class MyComponent     
   constructor(public media: MediaObserver) 

Esto ocultará la navegación lateral en los tamaños de ventana gráfica móvil.

Hola, así es como resolví este problema.

Aplicación.componente.html

    
        
            
Sidenav
        
        
            Item 1
            Item 2
            Item 3
        
    
    
        

            
 text content
            

                What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the
                printing and typesetting industry. Lorem Ipsum has been the         
            
        
    

aplicación.componente.ts

import  Component, ViewChild, HostListener   from '@angular/core';
import  BehaviorSubject  from 'rxjs';
import MatSidenav from '@angular/material/sidenav';

@Component(
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
)
export class AppComponent  
  screenWidth: number;
  private screenWidth$ = new BehaviorSubject(window.innerWidth);
  @ViewChild('sidenav') sidenav: MatSidenav;
  @HostListener('window:resize', ['$event'])
  onResize(event) 
    this.screenWidth$.next(event.target.innerWidth);
  
  constructor()  

  ngOnInit() 
    this.screenWidth$.subscribe(width => 
      this.screenWidth = width;
    );
  

aquí está el código en slackblitz

Si haces scroll puedes encontrar las acotaciones de otros creadores, tú también tienes la habilidad insertar el tuyo si te apetece.

---

---

Utiliza Nuestro Buscador