I know in Angular2+ we can create condition in html like this:
<p>{{ dynamicData.value? dynamicData.value : dynamicData.default}}</p>
Also we can do something like this:
<p>{{ dynamicData.value? 'text 1' : 'text 2'}}</p>
But I would like to combine this two solutions and I have no idea how to do this. In general I would like to do something like this:
<p>{{ dynamicData.value? 'Dynamic data value is equal: {{dynamicData.value}}' : 'no dynamic data'</p>
Have you any idea how to handle this text interpolation?
You do not need to use interpolation within interpolation, you already have access to variables and can try something as below:
<p>{{ dynamicData?.value ? ('Dynamic data value is equal: ' + dynamicData?.value) : 'no dynamic data'}}</p>
<p *ngIf = "dynamicData.value"> 'Dynamic data value is equal' {{dynamicData.value}} </p>
<p *ngIf = "!dynamicData.value"> 'no dynamic data' </p>
You can use variable in your .ts file or you can use + interpolation 'Dynamic data value is equal: ' + dynamicData.default.
But I like more answer posted by FedMice ;)
I hope this works.
<p>{{ dynamicData.value ? (`Dynamic data value is equal: ${dynamicData?.value}`) : `no dynamic data`}}</p>
Related
I am trying to read a variable which is defined in my javascript. It is a get request from a mongoDB. The whole database is then stored under a variable and is read by the HTML and displayed.
The get request from the MongoDB has an output like this:
(Lets say this is stored under the variable database):
[
{
0:
{
TITLE1: valueone
}
},
{
1:
{
TITLE2: valuetwo
}
}
]
My HTML looks like this:
<p> {{ database?.TITLE1 }} </p>
I get the error Cannot read property '0' of undefined. I understand this is because I need to define [0] to be able to read TITLE1.
Based on this I have tried the following:
<p> {{ database?[0].TITLE1 }} </p>
This has this error: Template parse errors:
Parser Error: Conditional expression database?[0].TITLE1 requires all 3 expressions at the end of the expression [{{ database?[0].TITLE1 }}]
<p> {{ database?.[0].TITLE1 }} </p>
This has this error: Template parse errors:
Parser Error: Unexpected token [, expected identifier or keyword at column 7 in [{{ database?.[0].TITLE1 }}]
<p> {{ database?.0.TITLE1 }} </p>
This has the same error as the one above.
What is the correct way to be able to read the values that I am after. In the HTML the output should be valueone.
Because your database is array, use need use [0] to get first item and your key is number so you need use ['0'] to get property value, you also can use ? to check object null before using TITLE1
Finally you can use {{ database[0]['0']?.TITLE1 }}
Demo https://stackblitz.com/edit/angular-o79rra
Well I mean, at some point you have to think a little about JS basics instead of trying everything until it works ...
From the code you have provided, the syntax would be
{{ data[0]['0'].TITLE1 }}
Try
<p> {{ database[0]['0']?.TITLE1 }} </p>
Do it dynamically by:
<p *ngFor="let item of database; let i = index">
{{item[i]['TITLE' + (i + 1)]}}
</p>
In our Angular project, we use interpolation as shown below, but we also need to use this interpolated value in the [state] property. But we haev not managed so far. Any idea?
If we set id values as shown below, there is no problem.
<a routerLink="/ticket/details/" [state]="{ id: '5' }" >{{row.TicketId}}</a>
But we cannot get dynamically by obtaining row.TicketId (it is obtained as label in {{row.TicketId}}) but cannot concatenate with id parameter.
<a routerLink="/ticket/details/" [state]="{ id: {{row.TicketId}} }" >{{row.TicketId}}</a>
The brackets in [state]="..." tell Angular to evaluate the template expression, so you cant use interpolation there. So, as I said in comment it should be:
[state]="{ id: row.TicketId }"
Try [state]="{ id: row.TicketId }"
currently my div looks like this:
<div class="class-a" [ngClass]="{'class-b': !person.something}">
now I want to have another condition...
so now I want this div to be of class-a If something class-b If something else class-c
how should I do this?
im using angular 4.
thanks!
Add it like properties to an object literal:
[ngClass]="{'class-b': !person.something, 'other-condition': isOther }"
Another option is to return a string from the component if you think you need more complex logic, or know there will only be one. This might be more testable.
Whatever string you return will be rendered as a class(es)
[ngClass]="renderClass()"
renderClass() {
switch(this.user.theme){
case "dark":
return "dark-theme"
case "light":
return "light-theme"
}
}
The better way for use this Syntax ngStyle Because,
it's Not Completed Answer.
If you want to toggle some classes like text-info Or text-danger for <i> tag (
some exp ? 'text-info' : 'text-danger'
).
The best answer is array not object.
[ngClass] = "[some exp ? 'text-info' : 'text-danger', ...]"
GoodLuck
I currently have a date that is formatted in unicode:
k = u'2015-02-01'
I tried to add this to a list and change it into a string:
date = []
date.append(str(k))
Then I want to pass this as a Django context to my template.
However, the date is showing up with the following:
'2015-02-01'
How do I just rid of $#39; and replace it with a double quote (")?
Thanks much.
You can try to prevent string escape in template like this:
{{ variable|safe }}
In-view way:
from django.utils.safestring import mark_safe
from django.template import Context
data=mark_safe(data)
inescapable = Context({'data': data}, autoescape=False)
I know this is old but other people might stumble upon this with the same problem
Try
{% autoscape off %} {{ date }} {% endautoscape %}
It worked fine for me
When requesting graphs from google charts the data must be sent as a text array. The csv file has to be pure text with no apostrophes.
however
code fragment
data = repr(textData)
returns data bounded by ' '
this is interpreted as "'" in html
The solution to this is to javascript split method
var par = textData.split(""'") textArray = par[1] // the part without '
rest of code
i have several strings that look like this:
contactBtn, programBtn, cartBtn.
How can i split these strings so that the "btn" gets discarted, so i keep contact, program, cart.
How would i achieve this?
The String class has a replace method:
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/String.html
Check out the Replace() Section of the ActionScript 3.0 Documentation.
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/String.html#match%28%29
var yourString:String = “contactBtn”
yourString= yourString.split(“Btn”).join(“”);
trace(yourString);
// Output : yourString = "contact"
You would just have to iterate through all of your buttons.
You can also use RegExp :
trace(/.+(?=btn$)/gi.exec("foobtn"));//foo
trace(/.+(?=btn$)/gi.exec("fooBTN"));//foo
trace(/.+(?=btn$)/gi.exec("barbtn"));//bar
trace(/.+(?=btn$)/gi.exec("bar"));//null