NgStyle in Angular 2+ does not taking in consideration 0(zero) from input parameter

Question

I have an input parameter called top and bottom, which as they state, is the top and bottom in CSS. When I add as input in component 0 to the top, the 0 is not present in the CSS style. E.G the top: 0px is not showing there.

<k-sidebar [id]="'testId'" 
  [attachToBody]="true"
  [top]="0"
  [bottom]="60"
  [sideBarMode]="'sliding'"
  [sideBarSide]="'right'" 
  [clickOutsideSidebar]="true" 
  [theme]="theme.dark" 
  [sideBarOverlap]="false"
  [scrollable]="true"
  [sideBarWidth]="'377px'"
  [selfToggle]="true">
    <!--<ng-template kennedysSidebar>
      This is a template passed
    </ng-template> -->
  </k-sidebar>

and the ngStyle of the HTML component is like this.

[ngStyle]="{'width.px': sidebar.isDesktopWidth ? sideBarWidth : '',
         'margin-bottom.px': marginBottom ? marginBottom : '',
         'margin-top.px': marginTop ? marginTop : '',
         'top.px': top ? top : '',
         'bottom.px': bottom ? bottom : ''}"

The bottom I can see it in the CSS as 60px, however, when I pass 0(zero) it is not present in the CSS.. any ideas why is this happening? I guess the top(input) is treated as null or something

'top.px': top ? top : ' 0 ' so i should do it like this then? — Csibi Norbert, Apr 28 '20 at 15:58
@Alexander Thanks, this is what I did, but I just wanted to see why the 0 is not taken into consideration. You answered it, now I know! :P — Csibi Norbert, Apr 28 '20 at 16:00

score 3 · Accepted Answer · answered Apr 28 '20 at 16:00

3

because 0 is a falsy value. The condition top ? top : '' will always return false

answered Apr 28 '20 at 16:00

Alexander

3,019
1
20
24

NgStyle in Angular 2+ does not taking in consideration 0(zero) from input parameter

1 Answers1