ng-style with 2 if and else condition - javascript

Hello I'm trying to use two conditions for ng-style for angular. trip.reviewed (true/false) and trip.approval (true/false). here is my try below but I get errors. I cant find the correct format.
[ngStyle]="{'background-color': trip.approval? '#80ff80' : '#ff8080'} : {'background-color': trip.reviewed? '' : '#D3D3D3'}"

just use it:
[ngStyle]="{'background-color': tripReviewed ? (tripApproval ? '#80ff80' : '#ff8080') : '#D3D3D3'}"
Demo: https://stackblitz.com/edit/angular-rmaxnt

Related

How to access object property in angular using string interpolation?

I have this object in my component ts file that looks like this:
someData = {
someValue: null,
unit: "centimeters"
},
In my template (html file) I have to verify the value of "someValue" property. If its value is null then display the unit, else display the value of someValue and unit together. I have the below code but it doesn't seem to work. Can anyone point me in the right direction? Thanks in advance!
<div>{{ someData?.someValue === null ? someData?.someValue.unit : someData?.someValue someData?.unit }}</div >
You can use ngif to check the condition and show the data:
<div *ngIf="someData?.someValue === null">{{someData.unit}}</div>
<div *ngIf="someData?.someValue!= null">{{someData.someValue}} {{someData.unit}}</div>
Your two values at the end aren't going to render right, because it's executable javascript, not HTML when inside the double brackets.
I would suggest splitting this into two lines of HTML.
<div *ngIf="someData?.someValue; else unit_only">{{someData.someValue}} {{someData.unit}}</div>
<ng-template #unit_only>{{someData?.unit}}</ng-template>
Or you could try sticking with your original approach...
<div>{{ someData?.someValue === null ? someData?.unit : someData?.someValue + ' ' + someData?.unit }}</div>

Class binding a ternary and non-ternary attributes

Let's say I have a tag that uses a ternary operator to add alignment to it:
<td
:class="alignment ? ('u-' + alignment) : null"
>
This works as expected since I have my pre-defined alignment classes with the number that I need, now I would like to add a new attribute in this tag, let's say I want to add the class u-bright if the prop isBright is true:
<td
:class="{'u-bright' : isBright}"
>
How to keep both conditions in the same tag? Something like:
/** Obviously this doesn't work */
<td
:class="{
alignment ? ('u-' + alignment) : null,
'u-bright' : isBright
}"
>
Try to use the array syntax :
<td
:class="[alignment ? ('u-' + alignment):'', isBright?'u-bright':'']"
>

JS Conditional Template in Column

I'm pretty new to JavaScript and it makes this even more difficult for me.
I'm trying to put a condition in my column template but I can't get it to work.
The code is this:
template: '#viewMode' == "EDIT" ? '<input class="equipDropDownEditor"/>' : "#:PROMOTION_TYPE#",
This almost shows what I want. The problem is that if the Promotion_Type field is null, it shows null on the screen.
So, the condition that I want to implement is: If the viewmode is "edit", it will return the equipDropDownEditor.
In case it is not, it shows the field PROMOTION_TYPE. But, in case that Promotion_Type returns a null, I don't want it to show anything (empty string, for example.
This is what I have tried. Still got the null on the screen when the "viewMode" is not "EDIT".
template: '#viewMode' == "EDIT" ? '<input class="equipDropDownEditor"/>' : ("#:PROMOTION_TYPE#" == null ? " " : "#:PROMOTION_TYPE#"),
To help someone in the future, I got it working with: template:
'#viewMode' == "EDIT" ? '<input class="equipDropDownEditor"/>' : ("#:PROMOTION_TYPE#" == null ? " " : "#:PROMOTION_TYPE#" == "#:PROMOTION_TYPE#"),
Thanks anyway #Bertrand Le Roy

How to Check Two condition in populate in mongodb

I am able to check one condition when performing populate with this query
populate(path : 'nextschema' , match : {'company.brand' : 'ABC'})
but want to check two condition when populating.
'company.brand' : 'ABC' && 'company.brand.length == 1'
i am stuck here , please someone help me.
it works perfectly.
$match : {$and : [{'potent_substance.name' : {$size : 1}},
{'potent_substance.name' : molecule}]}

Angularjs if-then-else construction in expression

Can I somehow use if-then-else construction (ternary-operator) in angularjs expression, for example I have function $scope.isExists(item) that has to return bool value.
I want something like this,
<div ng-repeater="item in items">
<div>{{item.description}}</div>
<div>{{isExists(item) ? 'available' : 'oh no, you don't have it'}}</div>
</div>
I know that I can use function that returns string, I'm interesting in possibility of using if-then-else construction into expression.
Thanks.
Angular expressions do not support the ternary operator before 1.1.5, but it can be emulated like this:
condition && (answer if true) || (answer if false)
So in example, something like this would work:
<div ng-repeater="item in items">
<div>{{item.description}}</div>
<div>{{isExists(item) && 'available' || 'oh no, you don't have it'}}</div>
</div>
UPDATE: Angular 1.1.5 added support for ternary operators:
{{myVar === "two" ? "it's true" : "it's false"}}
You can use ternary operator since version 1.1.5 and above like demonstrated in this little plunker (example in 1.1.5):
For history reasons (maybe plnkr.co get down for some reason in the future) here is the main code of my example:
{{true?true:false}}
You can easily use ng-show such as :
<div ng-repeater="item in items">
<div>{{item.description}}</div>
<div ng-show="isExists(item)">available</div>
<div ng-show="!isExists(item)">oh no, you don't have it</div>
</div>
For more complex tests, you can use ng-switch statements :
<div ng-repeater="item in items">
<div>{{item.description}}</div>
<div ng-switch on="isExists(item)">
<span ng-switch-when="true">Available</span>
<span ng-switch-default>oh no, you don't have it</span>
</div>
</div>
This can be done in one line.
{{corretor.isAdministrador && 'YES' || 'NÂO'}}
Usage in a td tag:
<td class="text-center">{{corretor.isAdministrador && 'Sim' || 'Não'}}</td>
I am trying to check if a key exist in an array in angular way and landed here on this question. In my Angularjs 1.4 ternary operator worked like below
{{ CONDITION ? TRUE : FALSE }}
hence for the array key exist i did a simple JS check
Solution 1 : {{ array['key'] !== undefined ? array['key'] : 'n/a' }}
Solution 2 : {{ "key" in array ? array['key'] : 'n/a' }}

Categories