Tengo 2 componentes: sidenav y toolbar. Ambos con sus propios ts, html y css. Entre ellos necesitan comunicarse, ya que dependiendo del tamaño de la pantalla, el sidenav se oculta o aparece. Pero al toolbar también le suceden cosas (aparece o se oculta un botón). Hice un servicio para que entre ellos interactúen, pero no logro que resulte. Este es el servicio:
import { Injectable } from '@angular/core';
import { MatSidenav } from '@angular/material/sidenav';
@Injectable({
providedIn: 'root'
})
export class SidenavToolbarService {
public sidenav!: MatSidenav;
public setSidenav(sidenav: MatSidenav) {
this.sidenav = sidenav;
}
public open() {
return this.sidenav.open();
}
public close() {
return this.sidenav.close();
}
public toggle(): void {
this.sidenav.toggle();
}
}
Pero en el ts del sidebar, no logro que funcione esto (usando el servicio)
@Component({
selector: 'app-sidenav',
templateUrl: './sidenav.component.html',
styleUrls: ['./sidenav.component.css']
})
export class SidenavComponent {
// @ViewChild(MatSidenav) sidenav!: MatSidenav;
constructor(private observer: BreakpointObserver, private sidenavToolbarService: SidenavToolbarService) { }
ngAfterViewInit(){
this.observer.observe(['(max-width: 800px)']).subscribe((res) => {
if (res.matches) {
// this.sidenav.mode = 'over';
// this.sidenav.close();
this.sidenavToolbarService.setSidenav (NO ME APARECE LA OPCIÓN MODE DEL SIDENAV)
} else {
// this.sidenav.mode = 'side';
// this.sidenav.open();
}
});
}
}
Qué debo hacer??? Muchas gracias
