Я начинаю свое путешествие с Angular Material, и я застрял в одном.
Панель расширения не работает (я вижу эту панель, но не могу открыть / закрыть ее). Я обнаружил, что он не работает из-за «компонента навигации» (созданного с материалом), который я импортирую в этот компонент (когда я удаляю панель расширения «компонент навигации» работает).
И да, я использовал
import {MatExpansionModule} from '@angular/material/expansion';
Это компонент с панелью расширения
<app-navigation-bar></app-navigation-bar>
<section id="faq">
<h2>FAQ</h2>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
This is the expansion title
</mat-panel-title>
<mat-panel-description>
This is a summary of the content
</mat-panel-description>
</mat-expansion-panel-header>
<p>This is the primary content of the panel.</p>
</mat-expansion-panel>
</section>
А вот код "навигационной составляющей"
<section id="navigation-bar">
<mat-drawer-container class="example-container">
<mat-drawer class="left-nav" mode="side" opened>
<button class="nav-button"><i class="far fa-play-circle"></i></button>
<button class="nav-button"><i class="fab fa-500px"></i></button>
<button class="nav-button"><i class="fas fa-broadcast-tower"></i></button>
<button class="nav-button"><i class="fas fa-film"></i></button>
<button class="nav-button"><i class="fas fa-microphone"></i></button>
<button [routerLink]="['/faq']" routerLinkActive="router-link-active" class="nav-button"><i class="fas fa-info"></i></button>
<button [routerLink]="['']" routerLinkActive="router-link-active" class="nav-button" id="exit"><i class="far fa-times-circle"></i></button>
</mat-drawer>
<mat-drawer-content class="right">
</mat-drawer-content>
</mat-drawer-container>
</section>
А вот и картинка