Как изменить значение переменной css из компонента Angular

Question

Я пытаюсь создать навигационное меню с изменяемым значением ширины в Angular.В моей папке ресурсов у меня есть файл variables.scss, который содержит все переменные, объединенные в один файл для удобства доступа.my variables.scss выглядит так:

//global variables
$globalNavWidth: 250px;

Компонент Angular для навигации имеет свою собственную таблицу стилей с именем navbar.scss, у которой свойство width связано с переменной, например:

.navbar{
width: $globalNavWidth;

моя структура папок выглядит примерно так:

У меня есть кнопка в моей навигации, которая вызывает функцию 'toggleNavWidth ()' при нажатии.Есть ли способ изменить глобальную переменную $ globalNavWidth из этой функции toggleNavWidth ()?

Answer 1

, если вы хотите применить условно, применить CSS-класс к элементу, используйте [ngClass]: https://angular.io/api/common/NgClass или еще если вы хотите применить стиль с помощью класса, наберите: https://angular.io/api/common/NgStyle

Answer 2

Мне удалось решить мою проблему, используя Host Binding, как предложил ashish.gd. Другие ответы, касающиеся использования ngStyle или ngClass, сработали бы для меня, если бы не тот факт, что переменная является общей для нескольких файлов scss. Спасибо всем за помощь!

Answer 3

вы делаете это просто с помощью директивы ngStyle или ngClass: https://angular.io/api/common/NgStyle