Develop Reference

access html tag property inside itself with angular

I have this html code :
<label [class]="text === 'test1' : 'class1' : 'class2'" text="test1"></label>
<label [class]="text === 'test1' : 'class1' : 'class2'" text="test2"></label>
I want to access the text property of those labels inside the class tester but I doesn't seem to be the right syntax and cannot find answer if it is possible and how ?

Try to add a template variables to the labels and use them.
<label #lbl1 [class]="lbl1.text === 'test1' : 'class1' : 'class2'" text="test1"></label>

Angular translate filter in ternary operator

I'm trying to translate my project into another language. I used angular translate library and provided an external JSON file with the translations. It looks like this:
{
"hello_world": "Hola Mundo"
}
When I'm using it with simple hardcoded strings it works just fine and I get my correct translations:
<p>{{ "hello_world" | translate }}</p>
But how to deal with the ternary operator in code like this?
<button> {{ conditionValue ? 'Show' : 'Hide' }} </button>
How to change those 'Show' and 'Hide' values into a translation filter with Angular Translate? I tried different ways but I got an invalid syntax errors.
Thanks!

I think if you wrap the ternary operator into (), it will work.
<button> {{ ( conditionValue ? 'Show' : 'Hide' ) | translate }} </button>

you may try for this:
here i make username online and offline when you choose soanish, the user online status will change into spnish based on ternary condition.
https://plnkr.co/edit/o16dpI?p=preview
[https://plnkr.co/edit/o16dpI?p=preview][1]
{{ ( userName ? 'Show' : 'Hide' ) | translate }}

I've just come up with the solution!
For ternary operators we have to use 'translate' directive instead of filter. And it works just fine:
{
"show_value": "Show",
"hide_value": "Hide",
}
<button translate> {{ conditionValue ? "show_value" : "hide_value" }} </button>

If exist prefix
{{ ('massmedias.' + (ctrl.actionType === 'add' ? 'add' : 'rename')) | translate }}

Here is your language JSON file
"CONFIGURATION": {
"NEW_TEMPLATE": "New Template",
"EDIT_TEMPLATE": "Edit Template"
}
CASE-I (With HTML tag)
<button> {{ ( variable === '5' ? 'CONFIGURATION.NEW_TEMPLATE' : 'CONFIGURATION.EDIT_TEMPLATE' ) | translate }} </button>
CASE-II (With some third party attribute)
<p-dialog header="{{(variable === '5' ? 'CONFIGURATION.NEW_TEMPLATE' : 'CONFIGURATION.EDIT_TEMPLATE') | translate}}">

JXS if else class doesn't work

{item.status}
<div className="{item.status !== '' ? 'hide' : ''} pull-right">Content</div>
Why above jsx has no effect? My item.status value is string. But in my DOM I can't see hide class been added.

This is because you have wrapped your ternary operator in " so it is treated as string. Try this instead:
{item.status}
<div class={"pull-right "+(item.status !== '' ? 'hide' : '')}>Content</div>

Beside what #rahul-pratap-singh said, consider using nice, tiny package called classnames - link here so you can use it like:
import classes from 'classnames';
// later on
<div className={classes({
"pull-right": true,
"hide": item.status !== '',
})} />
I think it leads to much cleaner code than joining string.
Or at least use es6 string interpolation - link here
// instead of
"pull-right "+(item.status !== '' ? 'hide' : '')
// with string interpolation
`pull-right ${item.status.length ? '' : 'hide'}`;

Else if in angular js template [duplicate]

This question already has answers here:
if else statement in AngularJS templates
(10 answers)
Closed 8 years ago.
I need to use else if in angularjs template .What is the syntax ?
For example in c i would write the code like below:
if (data.sender=='system')
{data.receiver}
else if (data.sender=='mail')
{data.receiver}
else {data.sender}
My code:
{{data.sender == 'System' ? data.receiver : ' '}}
{{data.sender =='mail' ? data.receiver : data.sender }}

{{(data.sender === 'system' || data.sender === 'mail') ? data.receiver : data.sender}}

There are no if-else syntax in angular templates as you are looking for. Too much logic in the templates makes it difficult to maintain. Here are two possible solutions:
<span ng-show="data.sender == 'mail' || data.sender=='system'">{{data.receiver}}</span>
<span ng-show="data.sender != 'mail' && data.sender!='system'">{{data.sender}}</span>
You can also use ng-switch in a similar way:
<span ng-switch="data.sender">
<span ng-switch-when="mail">{{data.receiver}}</span>
<span ng-switch-when="system">{{data.receiver}}</span>
<span ng-switch-default>{{data.sender}}</span>
</span>
The later having the advantage that only one of the spans will exist in the document where ng-show/ng-hide all spans exist in the document they are just hidden using display:none.
Other options would be writing your own directive, or creating special filters.

Here it is, but you should really try to avoid having this kind of complicated logic inside of templates, as a rule of thumb.
{{ data.sender == 'system' ? data.receiver : data.sender == 'mail' ? data.receiver : data.sender }}

If you need an elseif in angular template you can use a ternary operator as in C/C++
{{ data.sender=='system'
< 4 ? data.receiver : data.sender=='mail' ? data.receiver : data.sender}}
angular.module('quetion_app', []);
angular.module('quetion_app').controller('quertion_controller', ['$scope',
function($scope) {
$scope.data = {
sender: 'some sender',
receiver: 'somebody'
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="quetion_app">
<div ng-controller="quertion_controller">
{{data}}
<br>
<br>
{{ data.sender=='system'
< 4 ? data.receiver : data.sender=='mail' ? data.receiver : data.sender}} </div>
</div>
Change data.sender in snippet to check the behavior
Hope it helps

This type of logic really belongs in the controller or service which is responsible for setting up data in your $scope. Placing it in your view brings a lot of logic in to the view unnecessarily and also causes that logic to be run as a watch which both expensive and unnecessary.
In the code that establishes data you could have:
data.displayedSender = (data.sender === 'system' || data.sender === 'mail') ? data.receiver : data.sender;
Then in your view you bind to the data.displayed sender:
<span>{{data.displayedSender}}</span>

React JSX compiling

I'm trying to add the class name "active" to links when they are clicked. I can't get this JSX to compile.
<li onClick={this.showDeals}><a className={(this.props.panel == 'deals') ? 'active' : ''>Deals</a></li>
<li onClick={this.showTasks}><a className={(this.props.panel == 'tasks') ? 'active' : ''>Tasks</a></li>
<li onClick={this.showActivities}><a className={(this.props.panel == 'activities') ? 'active' : ''>Activities</a></li>
What am I doing wrong?
ReactifyError: content.js: Parse Error: Line 740: Invalid regular expression while parsing file

You need to close your className={... 's.