Primeng: Sidebar component styleClassand ngStyle dont work

[pantonis]

There is no guarantee in receiving a response in GitHub Issue Tracker, If you'd like to secure our response, you may consider PrimeNG PRO Support where support is provided within 4 business hours

I'm submitting a ... (check one with "x")

[X ] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior
When setting the style using either [ngStyle]="{width:'1200px'}" or
styleClass="ctrl-style" the sidebar is not resized to the specified width

Expected behavior
Widht should be the same as the on set in ngStyle or styleClass

Please tell us about your environment:

WIndows 10, npm, angular-cli

• Angular version: 2.0.X
  4.2.5

• PrimeNG version: 2.0.X
  4.2.2

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  All

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  Typscript

[cagataycivici]

Unable to replicate;

<p-sidebar [(visible)]="visibleSidebar1" [baseZIndex]="10000" [style]="{width:'500px'}" styleClass="my-class">

Ends up in dom as;

<div class="ng-tns-c1-1 my-class ng-trigger ng-trigger-panelState ui-sidebar ui-widget ui-widget-content ui-shadow ui-sidebar-active ui-sidebar-left" ng-reflect-klass="my-class" ng-reflect-ng-class="[object Object]" ng-reflect-ng-style="[object Object]" style="width: 500px; z-index: 11001; opacity: 1;">

[pantonis]

@cagataycivici the style works you are correct.
styleClass does not work. Try to remove the width from style and add it to the my-class. Problem occurs when you add this class to the css file of the component where I use the sidebar.
If I add the my-class in a global css file it works.

[jdashcode]

This works for me after setting encapsulation to ViewEncapsulation.None in the associated component.ts file. I would like to know of a cleaner solution where I don't have to change the view encapsulation property, but this works for now.

@Component({ selector: 'some', templateUrl: './some.component.html', styleUrls: ['./some.component.scss'], encapsulation: ViewEncapsulation.None })

After setting that, you should be able to modify the component's css.