Open/Close sidenav from another component

Question

I use angular (latest version) and angular material.

There are 3 components:

• header.component, in which there is a control button for right-sidenav

Answer 1

I used @Input() inputSideNav: MatSideNav in parent\ another component to pass the sideNav object as target property from child component. It works as expected. By the way, I liked the service implementation by @Eldho :)

Child.component.html

  
    List Products
  
  
    
  

layout-header.component.html

  
    Menu
  

layout-header.component.ts

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

@Component({
  selector: 'app-layout-header',
  templateUrl: './layout-header.component.html',
  styleUrls: ['./layout-header.component.css']
})
export class LayoutHeaderComponent implements OnInit {
  @Input() inputSideNav: MatSidenav;

  constructor() { }

  ngOnInit() {
  }
}