I want to conditionally style elements by comparing two attributes.
a url parameter 'customerID'
http://localhost:8080/home?customerID=3
a model attribute
th:each=" customer : ${customers}"
I want to change the background of a button if these two parameters are equal. I'm using inline styling with thymeleaf.
th:style="${param.customerID == customer.id ? 'background-color:green' : 'background-color:red'}"
but the result of the condition is always false even when the two arguments are equal.
<div class="user-list">
<div class="active-btn-group" id="active-button-group" th:each=" customer : ${customers}">
<p th:text="${param.customerID}">Test</p>
<p th:text="${customer.id}">Test</p>
<button th:id="${customer.id}" th:style="${param.customerID == customer.id ? 'background-color:green' : 'background-color:red'}">
</button>
</div>
</div>
How should I change the about inline formatting expression?
I think there is a type conversion problem. would you try like bellow th:style="${#strings.equals(#strings.toString(param.customerID), #strings.toString(customer.id))?'background-color:green' : 'background-color:red' }
Related
i would like to know how can i change the color of a badge programmtically in angular.
i would like to be able to set the color of the badge initially to white and if the percVLRiskTotal is equal a specific value, then the color of the badge should be set to green for an example.
css:
<span class="badge badge-purple">{{percVLRiskTotal}} <span class="clr-sr-only"></span></span>
There are multiple ways to set a style class conditionally in Angular. For your case, you could do something like:
<span class="badge" [class.badge-green]="percVLRiskTotal === 1000">
{{percVLRiskTotal}} <span class="clr-sr-only">
</span>
This will apply the class named badge-green to the span element if the value of the percVLRiskTotal property equals 1,000.
More information can be found here.
based on your sample I think u can use ngClass like this:
[ngClass]="{'badge-purple': yourCondition === 'Option'}"
or for multiple conditions:
[ngClass]="{'badge-purple': yourCondition1 === 'Option1', 'badge-red' : yourCondition2 === 'Option2' }"
There are many methods to achieve. This
here I think you can use the ngStyle directive provided by angular
<span class="badge" [ngStyle]="{'background-color': percVLRiskTotal == 50 ? 'green':'blue'}">{{percVLRiskTotal}} <span class="clr-sr-only"></span>
I need to get rel="" into this html. This is part of AEM, so I have an xml file doing this:
content.xml
<rel
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="HTML attribute to apply to the component."
fieldLabel="Rel"
name="./rel"/>
I've tried just duplicating how id is handled, along with a million other things...
button.html
<button
data-sly-use.button="com.adobe.cq.wcm.core.components.models.Button"
data-sly-element="${button.buttonLink.valid ? 'a' : 'button'}"
type="${button.buttonLink.valid ? '' : 'button'}"
id="${button.id}"
rel="${button.rel}" <--THIS DOES NOT WORK
class=""
data-sly-attribute="${button.buttonLink.htmlAttributes}"
aria-label="${button.accessibilityLabel}"
data-cmp-clickable="${button.data ? true : false}"
data-cmp-data-layer="${button.data.json}">
<span data-sly-test="${button.text}" class="">${button.text}</span>
</button>
You can use the properties object with a HTL context attribute.
<button rel=${properties.rel # context='attribute} </button>
this was the answer
rel=${properties.rel}
I want to use a local variable into my html template to use it in css classes but without linking it with the component. I want to do that :
[local_html_variable = 1]
<div class="css-{{ local_html_variable }}">
Div #1
</div>
[local_html_variable + 1]
<div class="css-{{ local_html_variable }}">
Div #2
</div>
[local_html_variable + 1]
<div class="css-{{ local_html_variable }}">
Div #3
</div>
...
to get
<div class="css-1">
Div #1
</div>
<div class="css-2">
Div #2
</div>
<div class="css-3">
Div #3
</div>
...
Important : the number of div is dynamic.
But I don't achieve it. I tried with <ng-template let-localHtmlVariable> but didn't work.. Any idea ?
You can use *ngFor structural directive
<div *ngFor="let value of [1,2,3]" class="css-{{value}}">
DIV #{{value}}
</div>
Here is a very situational answer that takes advantages of truhy/falsy values :
<ng-container *ngIf="1 as i">
Number is {{ i }}
</ng-container>
Use it in your classes in the container itself :
<div class="css-{{ i }}">With interpolation</div>
<div [class]="'css-' + i">With input</div>
Here is the stackblitz : https://stackblitz.com/edit/angular-3wm4en?file=src%2Fapp%2Fapp.component.html
EDIT explanation :
In javascript, every value can be transalted to boolean : they are truthy or falsy values.
The quick boolean parse operator is the !! double negation.
Let's try :
console.log(!!'');
console.log(!!0);
console.log(!!5);
When we use this notation, the evaluation use the same principle : it tests if the given value is truthy or falsy. In numbers, 1 being truthy, the test checks out, and the as i notation simply creates a template variable.
For information, falsy values are 0, '', null, undefined, infinity, NaN.
I've created a custom tag to hide zero values from HTML. I use this for hiding currency formatted numbers when its values are zero.
This is my custom tag:
def hideifz(value):
return '' if value == 0 else value
The problem is that this tag deletes some of my HTML.
This is the relevant part of my template:
<div class="price">
<span class="price-new">{{ publication.price_record.low_price|CLP }}</span>
<span class="price-old">{{ publication.price_record.high_price|hideifz|CLP }}</span>
</div>
This HTML is for showing product prices. publication.price_record.low_price and publication.price_record.high_priceare the prices of my product. If the product is in sale, it must have high_price != 0, and this value must be shown in the HTML.
CLP is just another tag for currency formatting:
def toCLP(value):
if not value:
return value
return '$'+intcomma(int(value)).replace(',', '.')
If high_price is not zero, the output HTML is okay. For example:
<div class="price">
<span class="price-new">$75.990</span>
<span class="price-old">$83.990</span>
</div>
In the other hand, if high_price is zero, some of my HTML is deleted:
<div class="price">$21.990</div>
Note that span.price-new and span.price-old were removed.
Now, if I remove the hideifz tag, the output of the previous example looks like this:
<div class="price">
<span class="price-new">$21.990</span>
<span class="price-old">0.0</span>
</div>
The spans are back when I remove the hideifz tag.
I just want to hide the python variable/value from the html, preserving the outer span for other uses.
I know I can solve this by simply using the {% if val %} tag, but I wanted to create my own tag for simplicty.
I'm working with django 1.10.
Thanks you.
Is it possible to add multiple attributes based on *ngIf?
My pseudo Code:
<span *ngIf="msg.active" *ngIf="msg.error" >Hallo</span>
And my output should be like this:
If msg.error == false and msg.active== true then it should be like this:
<span>Hallo</span>
If msg.error == true then it should be like this:
<span class="error" myTag="false" myTag2="false" >Hallo</span>
If msg.active == false then the span tag should be empty!
Does anybody have an idea?
i think you should try using nested ternary operator.
<span *ngIf="msg.active==true && msg.error==false? true: msg.active"> hallo <span>
try your condition using ternary operator. hope this will work
for myTag you have to use separate *ngIf
altogether in a single line it is possible as shown here,
DEMO : https://plnkr.co/edit/eKDhkuf3JO8CIKfz7Eqz?p=preview
<span *ngIf="msg.active || msg.error"
[class.error]="msg.error">
{{(msg.active==false)?'':'hello'}}
</span>