I have a simple component in Angular 4 that is as follows:
HTML
<div [style.clip-path]="shape" [style.background-color]="color"</div>
and the only thing I have added to the .ts file is:
color = 'green';
shape = 'polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)';
There is some styling that makes the div 400px by 400px.
When I serve this code I see a green box, meaning the style binding does work for at least background-color. However the box is still a square and not the pentagon that I defined. clip-path seems to not be set properly.
Weirder still I tested this with Angular 2 and it functions as expected.
Did something change from Angular 2 -> Angular 4 that would deny binding to particular style attributes?