Стиль не работает на угловой кнопке боковой панели

Question

Я новичок в Angular и установил ng-sidebar компонент через NPM, Я разработал свою боковую панель:

component.html:

<ng-sidebar-container>
    <ng-sidebar 
        [(opened)]="_opened"
        mode="push"
        autoCollapseWidth=500>
        <div>
            <!-- Sidebar-content goes here -->
        </div>

    </ng-sidebar>

    <div ng-sidebar-content>
        <router-outlet></router-outlet>
        <a id="show-sidebar" class="btn btn-sm btn-dark" href="#" (click)="_toggleSidebar()">
            <i class="fas fa-bars"></i>
        </a>
    </div>

</ng-sidebar-container>

Теперь у меня есть кнопка переключения с идентификатором #show-sidebar, я хочу применить к ней left: 300px; при открытии боковой панели, для этого я посмотрел консоль и нашел атрибут в теге ng-sidebar как ng-reflect-opened Затем я написал следующий стиль:

ng-sidebar[ng-reflect-opened=true] + div[_ngcontent-oer-c1] > div[_ngcontent-ocs-c0] a#show-sidebar {
    left: 300px;
}

Но это не работает! Есть предложения?

Примечание: Боковая панель переключается просто для добавления стиля к кнопке переключения.

Answer 1

Это можно сделать с помощью привязки классов , просто создайте класс в своем CSS как:

.toggled {
    left: 300px;
}

Поскольку у вас есть свойство _opened в вашем файле .ts , которое является логическим, так что просто добавьте это к желаемому элементу: [ngClass]="{toggled : _opened}". Надеюсь, это поможет:)