Discussion :

[ouijipix]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[krakatoa]

normalement on utilise le routing avec un sidenav pour naviguer entre les pages.
mais on peut aussi l'utiliser pour des sous pages ou des fonctionnalités de la page courante.

voici un exemple avec routing :
https://stackblitz.com/edit/angular-...component.html

tu peux aller voir le magnifique tutorial de dukoid sur Angular, il y a un chapitre sur la communication entre composants :
https://iner-dukoid.developpez.com/t...-angular/#LXIV