Как обновить стиль Angular с помощью ElementRef?

Question

Я новичок в Angular Я работаю над основанием, которое обновляет стиль при нажатии. Вот копия страницы HTML.

<nav>

  <button #toggleNavigation aria-expanded="false">
    <mat-icon>menu</mat-icon>
  </button>

  <div class="sidebar-sticky collapse navbar-collapse">

    <ul>

      <side-menu-item *ngFor="let item of navItems" [hidden]="item.isHidden"
                      [finished]="item.finished" [name]="item.displayName"
                      [routeURL]="item.routeURL"
                      [ngClass]="{'mt-auto': item.name === 'Summary'}">
      </side-menu-item>

    </ul>

  </div>

</nav>

Когда кнопка нажата, я хочу обновить ее до

<nav>

  <button #toggleNavigation aria-expanded="true">
    <mat-icon>menu</mat-icon>
  </button>

  <div class="sidebar-sticky collapse navbar-collapse show">

    <ul>

      <side-menu-item *ngFor="let item of navItems" [hidden]="item.isHidden" [finished]="item.finished" [name]="item.displayName" [routeURL]="item.routeURL"  [ngClass]="{'mt-auto': item.name === 'Summary'}"></side-menu-item>

    </ul>

  </div>

</nav>

Нажатие на кнопку приведет к отобразить список навигации. Как вы видите в коде, стиль обновлен с class="sidebar-sticky collapse navbar-collapse" до class="sidebar-sticky collapse navbar-collapse show". Первоначально я использовал файл bootstrap. js для обработки этого, но это мешало стилю, связанному с другой программой. В моем файле .ts это то, что у меня есть

import { Component, ElementRef, Renderer2, ViewChild } from '@angular/core';

@Component({
  selector: 'app-side-menu',
  templateUrl: './side-menu.component.html',
  styleUrls: ['./side-menu.component.scss']
})

export class NavMenuComponent {

  @ViewChild('toggleNavigation', {static: false}) toggleNavigation: ElementRef;
  constructor() {

  onToggleNavigation() {

  }
}

Любая помощь будет принята с благодарностью.

Answer 1

Я бы сделал это с [ngClass].

Попробуйте:

<nav>

  <button #toggleNavigation aria-expanded="true" (click)="onToggleNavigation()">
    <mat-icon>menu</mat-icon>
  </button>

  <div class="sidebar-sticky collapse" [ngClass]="{'show': !collapseSideNav}">

    <ul>

      <side-menu-item 
          *ngFor="let item of navItems" 
           [hidden]="item.isHidden" 
           [finished]="item.finished" [name]="item.displayName" 
           [routeURL]="item.routeURL"  
           [ngClass]="{'mt-auto': item.name === 'Summary'}"
           (click)="collapseNavigation()"
>
</side-menu-item>
    </ul>

  </div>

</nav>

collapseSideNav: boolean = true; // can default it to whatever you like

onToggleNavigation() {
  this.collapseSideNav = !this.collapseSideNav;
}

collapseNavigation() {
  if (!this.collapseSideNav) {
    this.collapseSideNav = true;
  }
}

Answer 2

Используйте [ngClass] для этого:

<nav>
  <button  [attr.aria-expanded]="collapsed" (click)="collapsed = !collapsed">
    click
  </button>
  <div [ngClass]="{'show' : collapsed}" class="sidebar-sticky collapse navbar-collapse">
    <ul>
      content
    </ul>
  </div>
</nav>

https://stackblitz.com/edit/angular-3rn8no?file=src%2Fapp%2Fapp.component.ts