Communication intercomposant Angular

Bonsoir ! Alors voilà, débutante en Angular je me demandais comment faire fonctionner ma sidenav située dans un component différent du bouton ou je veux activer ma sidenav.. J'ai pas mal cherché mais je n'arrive pas à voir comment je peux faire pour lier les deux composant et faire en sorte que ma sidenav s'ouvre via ce bouton.
Voici mon code :

Header.component.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<mat-toolbar>
  <div class="titreap">My Application</div>
  <!-- Bouton header -->
  <button mat-icon-button [matMenuTriggerFor]="menu" class="boutonHeader">
      <mat-icon>more_vert</mat-icon>
  </button>
  <mat-menu #menu="matMenu">
    <button mat-menu-item>
      <mat-icon>home</mat-icon>
      <span>Home</span>
    </button>


//Bouton qui me sert ouvrir ma side bar
  <button mat-menu-item (click)="sidenav.toggle()">
    <mat-icon>help_outline</mat-icon>
    <span>Aide</span>
  </button>
  </mat-menu>
</mat-toolbar>

Header.component.ts

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { Component, OnInit,Input,HostListener, Output, EventEmitter } from '@angular/core';
import { Sidebar2Component } from '../sidebar2/sidebar2.component';
 
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
 
export class HeaderComponent implements OnInit {
 
  //sideBarIsOpened = false;
 
  @Output() toggle: EventEmitter<any> = new EventEmitter();
 
  constructor() { }
 
  emit() {
      this.toggle.emit(null);
  }
  ngOnInit() {
  }
 
}

SideBar.component.html

Code:

1
2
3
4
5
6
7
8
<mat-sidenav-container class="example-container">
    <mat-sidenav #drawer class="sideBar" mode="side" opened>
        sidenav
    </mat-sidenav>
 
    <mat-sidenav-content>
    </mat-sidenav-content>
</mat-sidenav-container>

Si quelqu'un pourrait m'aider j'en serai très reconnaissante :/
Merci beaucoup :)