0

I'm trying to make a navigation menu with toggable width value in Angular. In my assets folder, I have a variables.scss file that contains all variables bundled in one file for easy accessibility. my variables.scss looks like so:

//global variables
$globalNavWidth: 250px;

The navigation Angular component has its own stylesheet named navbar.scss which has the width property linked to a variable like so:

.navbar{
width: $globalNavWidth;

my folder structure looks something like this.

my folder structure

I have a button in my navigation that triggers the function 'toggleNavWidth()' on click. Is there any way I can change the global variable $globalNavWidth from this toggleNavWidth() function?

K.Warrens
  • 35
  • 8
  • Refer this [enter link description here](https://stackoverflow.com/a/47982564/9491935) – Sagar Patil Apr 02 '19 at 11:39
  • 3
    `SCSS` is a pre-processor, which means the value `$globalNavWidth` is only available during compiling from `scss` to `css`. You should use `ElementRef` to change the `navbar` css properties at runtime. – ashish.gd Apr 02 '19 at 11:39
  • Check this solution. I think this is what you want. https://stackoverflow.com/questions/33328347/angular2-dynamic-change-css-property – Sarkani Apr 02 '19 at 11:53
  • @ashish.gd I need the $globalNavWidth in other components as well (to scale them with the changes made to $globalNavWidth) is there a functionality in ElementRef that could fix this? Or should I split off my variables so $globalNavWidth is isolated and I can replace it with a hardcoded value? – K.Warrens Apr 02 '19 at 12:24
  • Since you need application wide css changes based on change in the `.navbar` css' width property. Please have a look at `HostBinding`. Also this link will help to understand various options: https://blog.angular-university.io/angular-host-context/ – ashish.gd Apr 02 '19 at 12:34
  • I don't understand the different selectors 100% yet but this does indeed look promising for solving my issue. Thanks! – K.Warrens Apr 02 '19 at 12:53

3 Answers3

0

you do this simply with ngStyle or ngClass directive: https://angular.io/api/common/NgStyle

MullisS
  • 238
  • 2
  • 11
  • The problem is that I have multiple uses for the $globalNavWidth variable. So if I use ngStyle or Class I'd have to somehow get the new value for my nav width to other components as well. – K.Warrens Apr 02 '19 at 12:09
  • You cant change the scss variable. So maybe you store the width in a service. – MullisS Apr 02 '19 at 12:33
0

if u want to apply conditionally apply a CSS class to the element go with [ngClass]:https://angular.io/api/common/NgClass or else if u want to apply a style using class go with:https://angular.io/api/common/NgStyle

madhavsai bhushan
  • 263
  • 1
  • 15
0

I was able to resolve my issue using Host Binding like ashish.gd suggested. The other answers regarding the use of ngStyle or ngClass would have worked for me if not for the fact that the variable is shared among multiple scss files. Thanks for the help everybody!

K.Warrens
  • 35
  • 8