ng-style

I have a div that I want to style based on a condition. If styleOne is true I want a background colour of red. If StyleTwo is true, I want the background colour to be blue. I've got half of it working with the below code. <div id="myDiv" [ngStyle]="styleOne && {'background-color': 'red'}"> Is it possible to add a condition to say: if styleOne is true, do this if styleTwo is true, do this? Edit I think i've resolved it. It works. Not sure if it's the best way: <div id="div" [ngStyle]="styleOne && {'background-color': 'red'} || styleTwo && {'background-color': 'blue'}"> For a single style

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: I'm trying to apply a background image to a div by using the angular ng-style and it works fine as long as the URL does not contain spaces. ng-style="{'background-image': 'url(' + parentIMGLink + ')'}" When there is space in URL like parentIMGLink = servername.images/there is name.png it does not work. On the other hand: img ng-src={{parentIMGLink }} Works fine. For sure I can manage so that names on the server wont contain spaces but is there any possibility to make ng-style work? 回答1: Just like in css you have to wrap your the image url in

I am designing a dynamic hr (horizonatal) rule. In my Style sheet hr.my-hr:after{ content:'Generic' } In my template <div ng-repeat="name in ['Adam', 'Collin', 'David']"> <hr class="my-hr" ng-style="{'content':name}"> But how do i dynamically change the content in the template when using ng-repeat ???? All ng-style does is add inline styles. However you want to add a psuedo element ::after . According to the MDN : You can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement. So inferred from that you can't use them inline, which sadly means ng

I've created a simple directive in Angular which generates a scroller to display some products. I'm having an issue with one part of the code. <ul ng-style="{'margin-left':{{currentMargin}}+'px'}"> <li ng-repeat="tyre in tyres" ng-style="{'width':{{liWidth}}+'px'}"> <div class="imageContainer"><img src="../Images/eutl/{{tyre.image}}"/></div> <div class="details"> <h3>{{tyre.name}}</h3> <a href="{{tyre.link}}">About this tire</a> </div> </li> </ul> and this is what it looks like in the browser once executed <ul ng-style="{'margin-left':0+'px'}"> <!-- ngRepeat: tyre in tyres --> <li ng-repeat=