I am trying to add ternary condition to shape which is an icon type shape="success-standard" - in shape="name.active ? 'success-standard' : 'times-circle'" that's where I am trying to add a condition for icon type. and using [shape] directive doesn't work
<clr-dg-row class="man-rcs" *ngFor="let name of visibleNames">
<clr-dg-cell (click)="handleRowClick(name)" class="tac">
<clr-icon size="18" shape="name.active ? 'success-standard' : 'times-circle'">
</clr-icon>
</clr-dg-cell>
</clr-dg-row>
Normally I would do it like this but that's not what I am looking for in this case
<clr-dg-cell class="tac">
<clr-icon size="18" *ngIf="name?.active" shape="success-standard" class="is-solid is-success"></clr-icon>
<clr-icon size="18" *ngIf="!name?.active" shape="times-circle" class="is-solid is-danger"></clr-icon>
</clr-dg-cell>
You need to bind to the shape attribute like this. Icons are our web components, so you have to use this different approach.
[attr.shape]=“name.active ? ‘success-standard’ : ‘times-circle’”
See How can I dynamically change the shape of a clr-icon custom element? For more details.
Try this code below
<clr-icon size="18" shape="{{name.active == true ? 'success-standard' : 'times-circle'}}">
Or
<clr-icon size="18" shape="(name?.active == true ? 'success-standard' : 'times-circle')">
Hope first code will work
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'm using ng-zorro-antd library and I'm trying to pass a ng-template without duplicating HTML.
The component (in the url) expects TemplateRef as an Input property (nzDot).
This is my ng-template:
<ng-template #dotTemplate let-step>
<div [ngSwitch]="step.status">
<span *ngSwitchCase="'active'" nz-icon nzType="info-circle" nzTheme="outline"></span>
<span
*ngSwitchCase="'error'"
nz-icon
nzType="info-circle"
nzTheme="fill"
class="text-volcano-6"
></span>
<span
*ngSwitchCase="'onboarding'"
nz-icon
nzType="info-circle"
nzTheme="outline"
class="text-yellow-6"
></span>
<span
*ngSwitchCase="'syncing'"
nz-icon
nzType="sync"
nzTheme="outline"
class="text-geekblue-6"
></span>
</div>
</ng-template>
What I'm trying to do is basically send this step object (let-step) as variable to the outlet, but I don't see a way to do this, as this is controlled by the ngTemplateOutlet inside of the 3rd party component.
Is there any smart way to do this?
I see that I can make 4 templates and then bind to the property like this:
step.status === 'Active'
? dotActiveTemplate
: step.status === 'syncing'
? dotSyncingTemplate
: step.status === 'onboarding'
? dotOnboardingTemplate
: dotErrorTemplate
But this solution seems bad and I would appreciate help.
Thanks!
Please find my below code. How can i show html flag in reactjs render method ().
<td>{ this.props.flag=="true" ? {⚐} : null} </td>
Its throwing error.
EDIT: Corrected as per comment below
You can simply wrap it in a span
or
You can use dangerouslySetInnerHTML, for example :
{this.props.flag ? <span dangerouslySetInnerHTML={{ __html: '⚐' }} /> : null}
I recommend reading more about it here.
Try wrapping it in a
<td>{ this.props.flag=="true" ? <span>⚐</span> : null} </td>
It will render just fine if you use unicode \u2690 instead of HTML encoding, e.g.
<td>{ this.props.flag && "\u2690" }</td>
https://jsfiddle.net/36Lrv0nL/
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>