I am rendering a list using *ngFor. I only want the next item to be rendered using index. I have tried a number of things but can't get it to work:
Next: {{ exhibit{{ i + 1 }}.fields.artist }}
Next: {{ exhibit[i + 1].fields.artist }}
What am I doing wrong?
Not sure why you do you want to render a list like this, but you can accomplish this using ngFor as below. You need to write the entire template expression inside double curly braces instead of just index.
Next: {{ exhibit[i + 1].fields.artist }}
Please find proof of concept here: https://stackblitz.com/edit/angular-cwxgee
Related
<p>Pattern Format (All Parameters are Optional):</p>
<p>{Parameter: 1, Parameter 2}</p>
Above is my code. the second line throws an error because I'm using curly braces in Angular. The error goes away if I use '(' braces.
But I want the curly braces printed.
What can I do so that I get the following result in the web UI? -
Pattern Format (All Parameters are Optional):
{Parameter: 1, Parameter 2}
P.S: I want to print the curly braces. I'm not trying string interpolation.
Values inside tags must be interpolated, which means surrounded by double curly braces {{ YOUR_VALUE }}.
You can take a look at official documentation to see if it can help
your case, since it's not very clear what are you trying to do.
Guide to interpolation:
https://angular.io/guide/interpolation
If you are trying to write it down you can try with:
{{"{Parameter: 1, Parameter 2}"}}
Please check this solution, I hope it will solve your problem.
<span>{{'{'}} {{Parameter:1, Parameter 2}} {{'}'}}.</span>
Its output will be as:
{ParameterValue1, ParameterValue2}
If you want to display single bracess { only instead of variable, you can use ng-non-bindable.
The ngNonBindable directive tells AngularJS not to compile or bind the contents of the current DOM element, including directives on the element itself that have a lower priority than ngNonBindable. Example
<div>Normal: {{1 + 2}}</div>
<div ng-non-bindable>Ignored: {{1 + 2}}</div>
Output of above will be:
Normal: 3
Ignored: {{1 + 2}}
When use ngNonBindable it will ignore parentheses in DOM element.
See Documentation ngNonBindable
Just add the #ngNonBindable directive to the element.
I am new to Vue.js and I am currently trying to figure out how to maintain whitespaces in the options of my HTML "select" drop-down. I am using v-for to populate the list like this:
<option
v-for="category in displayCategories"
:key="category">
{{ category }}
</option>
And the list items look like this (in a string array):
`SECTOR`,
` Food and Drink`,
` Education`,
` Transport`
Currently, something seems to be trimming out the space characters. I'm not sure if the problem lies with Vue or HTML...
Thanks for your time,
Josh
I am using the jinja2 templating language to create dual language documents. To that end, I have created a macro called select_lang which takes two strings as an argument, the text in the primary language and in the secondary language, and returns it on the format
<text in primary language> / <i><text in secondary language></i>
Sometimes, as input, I want do use a jinja2 variable, and this is where I struggle. Given the following code:
<!DOCTYPE HTML>
{% set bilingual = primary_lang and secondary_lang %}
{% from 'templates/partials/macro_select_lang.j2.html' import select_lang with context %}
<html>
<body>
{{ select_lang('Testo in italiano','Text in English') }}<br>
{{name.upper()}}<br>
{{ select_lang('Ciao, {{name.upper()}}','Hello, {{name.upper()}}') }}
</body>
</html>
I get this output:
Testo in italiano / *Text in English*
JANE DOE
Ciao, {{name.upper()}} / Hello, {{name.upper()}}
but the desired outcome would be that {{name.upper()}} was evaluated before being passed on to the select_lang macro.
I have searched the jinja2 documentation, but I can't find any relevant topic.
Note: one might think that this is a silly macro which could be replaced with some simple html-code. This is true in this example, but in the real application it does a whole lot more, so replacing the macro does not solve the problem; I need to evaluate the expression before passing it on.
In a regular programming language, I would have written something like
{{ select_lang('Ciao, ' + {{name.upper()}},'Hello, ' + {{name.upper()}}) }}
but this does not work and I suppose jinja2 does not offer an operator for string concatenation.
It seems you have too many curly braces!
Try:
{{ select_lang('Ciao, ' + name.upper(),'Hello, ' + name.upper()) }}
As you are already inside a {{...}} statement...
<img [src]=post.$value.split("|")[2]>
I want to bind the value post.$value.split("|")[2] to an image source. It is simply a string that comes from another string I have split. I want to avoid looping through another array since I have
*ngFor = 'let post of posts | async'
As the ngFor statement that loops over my elements and that is a FirebaseListObservable which I would like to avoid to mess with and keep like it is. For some reason html doesn't recognize the square brackets in the expression. What do I do, Angular won't recognize it using either the input [] syntax or the {{}}syntax.
You should surround your expression with quotes :
<img [src]="post.$value.split('|')[2]">
It seems that binding removes returns from a string.
<div>{{obj.progress}}</div>
when I inspect the object in the console I get:
but in the HTML I see:
I would like the words to be displayed with the returns like:
block 1
block 2
...
Can I force the returns?
I have tried using ng-bind-html and ng-bind as well.