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>
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 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' }
What I'm trying to do is make it so that <span v-if="spinnerToggle && command-id=='updateAllExternalReferences'">Spin</span> only renders when spinnerToggle has a value of true and the parent div has a command-id property of updateAllExternalReferences.
I've been able to get this to work using only the spinnerToggle conditional, but adding the command-id one causes it to give me the following error:
[Vue warn]: Property or method "id" is not defined on the instance
but referenced during render. Make sure that this property is
reactive, either in the data option, or for class-based components, by
initializing the property.
Does v-if not support conditionals that reference properties in the parent div? If so, how should I implement this sort of functionality? Below you'll find the parent div and the respective <span>.
<div class="tool is-activatable"
v-if="config.isVisibleToUser"
#click="dispatch"
:class="[config.cssClass, {'is-active': active, 'is-highlighted': highlight, 'is-button': !context.reordering}]"
:command-id="config.command"
:context-menu-name="contextMenu.name"
:context-menu-details="contextMenu.contextMenuDetails"
:data-id="config.id"
:disabled="disabled"
:data-placement="inMenu ? 'right-top' : config.tooltipPosition || 'bottom'"
:data-original-title="(config.tooltipKey || config.tooltip || config.toolName) | i18next"
:data-expanded-content="(config.expandedTooltipKey || config.expandedTooltip) | i18next" data-html="true"
:data-expand-delay="inMenu ? 0 : config.expandDelay > -1 ? config.expandDelay : 2000"
:data-trigger="config.tooltipTrigger"
:tooltip-dynamic-snippet-id="dynamicSnippetId">
<img v-if="!hasIcon && config.img" :src="config.img" />
<ToolIcon v-if="hasIcon" :icon="config.icon" :iconUri="config.iconUri" :initials="config.iconInitials"
:awaitingData="false" :updateAvailable="config.isNewerVersionAvailable"/>
<span v-if="spinnerToggle && command-id=='updateAllExternalReferences'">Spin</span>
<span class="tool-label" :class="{'hide-in-toolbar': !shouldShowLabel}">
{{ (config.toolDisplayName || config.toolName) | i18next }}
</span>
<ShortcutKeys v-if="inMenu" :shortcut="shortcut" />
<div v-if="context.reordering" class="drag-handle"></div>
</div>
You can't directly reference the attribute from the parent <div> but you can reference the same data that was used to populate it:
<span v-if="spinnerToggle && config.command === 'updateAllExternalReferences'">Spin</span>
If the command-id expression were more complicated you could refactor to use a computed property rather than duplicating the same logic in both places.
Lets assume below sudo code, As you professionals can see I want to use Ternary kind of condition with ng-if to apply different HTML title attribute.
I tried it as below but it did not work
<td>
<span ng-if="isOk == true ? title ="Is Ok" : title ="Is Not Ok"></span>
</td>
I know I can achieve what I want applying ng-if in <td> level using below code
<td ng-if="isOk == true">
<span title ="Is Ok"></span>
</td>
<td ng-if="isOk != true">
<span title ="Is Not Ok"></span>
</td>
But I want to know weather I can use less code like Ternary check and achieve what I want with ng-if?
I thank you professionals in advace
As it was specified in this thread: if else statement in AngularJS templates, you can use ternary condition this way:
<span title="{{isOk ? 'Is Ok' : 'Is Not Ok'}}"></span>