I currently have .pug code that looks like this:
a.item
.ui.green.horizontal.label something
.ui.basic.grey.label
| {{ variable1 }} descrip1
.ui.basic.green.label
| {{ variable2 }} descrip2
.ui.basic.grey.label
| {{ variable3 }} descrip3
I would like to make the colors of the individual ui elements dynamic based on the values in the variables. So for example, if variable1 > 30, the ui element would be
ui.basic.green.label
whereas if variable1 < 10, the ui element would be
ui.basic.red.label
Is there a way to do this in .pug? I just get multiple divs when I try and make each component dynamic. As a note, I tried
ui.basic.{{color_variable}}.label
or something to that effect, but obviously this is incorrect syntax and it didn't compile properly.
I'm very new to HTML and .pug and any help is appreciated!
EDIT: The solution that worked for me (with Sean's help) was escaping the character using the # key.
.ui(class= "basic #{color_variable} label")
or
.ui.basic.label(class= "#{color_variable}")
EDIT2: Apparently the above is deprecated, please look at Sean's answer below.
It's possible when using the standard attribute syntax for classes instead of the class literal syntax (or when combining the two).
Here's an example of how to do that with your markup.
This Pug—
.ui.basic.label(class= color)
—will compile to this HTML—
<div class="ui basic label green"></div>
—if the value of the color Pug variable is "green".
Related
In html am rendering some value in the and passing it as a input to a component like
below
<test-component
[title]= "data?.Kevin?.title"
</test-component>
Please be noted data?.Kevin?.title will give the title name.How ever, in the above, I want to render the name a bit dynamically like below
<test-component
[title]= "data?.{{name}}?.title"
</test-component>
{{name}} should render kevin and the tile value needs to be passed to the component.
Here the name is not being rendered correctly.
Any help is highly appreciated.
the solution is pretty simple: [title]= "data?.[name]?.title"
the equivalent of the first example would be: [title]= "data?.["Kevin"]?.title"
read more on https://www.w3schools.com/js/js_objects.asp see "Accessing Object Properties"
I've been trying to set a variable but it is not rendering on HTML. Here's a simple example:
<div *ngIf="'hello world'; let testVariable">{{testVariable}}</div>
However, the testVairable does not show up on HTML, but instead, the Elements in the inspect printed this:
I have another statement and it is rendering properly. The document variable is from the backend so this statement does not involve any variable setter:
<div *ngIf="document.story_summary " [innerHTML]="document.story_summary"></div>
I was wondering if there's any syntax that I miss?
There is an issue in your syntax. You need to put the testVariable first in your *ngIf, if not, it will always set as true. Also, ngIfElse accepts template instead of just a string, so you need to add a template to cater for your else. See the code below:
<div *ngIf="testVariable; else hello_world">{{testVariable}}</div>
<ng-template #hello_world>hello world...</ng-template>
Yes, there is an issue in your syntax your html format should be like this
<div *ngIf="testVariable; else hello_world">{{testVariable}}</div>
<ng-template #hello_world>hello world...</ng-template>
else part will be working in <ng-template>else part</ng-template>
I'm not sure how I explain this... :)
I am using symfony, twig and bootstrap to make a basic registration form on my website.
I have a checkbox at the end which the user must tick to accept the terms and conditions. the label for this checkbox includes HTML (the tag) which Bootstrap (or Twig) escapes, so I have to use a custom label next to the checkbox:
<div class="row align-items-center"> <!-- this is a workaround, may not be best practise -->
{{ form_errors(form.acceptTerms) }}
{{ form_widget(form.acceptTerms, { 'attr': {'form.acceptTerms.errors': ' '} }) }}
<label class="form-check-label" for="acceptTerms">I have read and accepted the Terms and Conditions</label>
</div>
Bootstrap renders the label as part of the form_widget twig element rather than the form_label , and the form_error is also rendered within the form_widget when there is an error. So, before, my label would just be displayed in plaintext, i.e. the html <a> tags would be visible to the user. But of course, since I am showing a custom label as well as the widget which includes the label, I have to set the widget label to ' ' (empty string) so now only one label is shown.
This work perfectly, UNTIL there is an error (i.e. the user doesn't tick the box and thus cannot register).
Then the error displays within the form_widget which is next to my custom label (they are in a bootstrap row div) and it ends up pushing my label to the right, when I want the error to be above the label. I tried adding {{form_errors(form.acceptTerms) }} above it as you can see, but that just displays the error BOTH above and next to the label. This is what it looks like with the above code in place:
ERROR you must accept the terms and conditions!
[ ] ERROR you must accept the terms and conditions!I Accept the **Terms and Conditions**
then this is what I WANT it to look like:
ERROR you must accept the terms and conditions!
[ ] I accept the **Terms and Conditions**
This seems like it should be a really easy thing to do, I don't know why its this difficult.
I need to somehow stop bootstrap from rendering the form_error and form_label within the form_widget .
Thanks
In Symfony 4.1 the bootstrap form theme was updated to be compliant with the WCAG 2.0 standard. As a result, the error for a field is no longer displayed with form_errors but within your form_label. If you separate your widget and label you will notice.
More information about this change can be found here.
In order to fix your problem just get rid of form_error (you don't need it any more) and only use form_label and form_widget. If that doesn't satisfy your needs or if you do not like the new behaviour for bootstrap 4 forms in symfony 4.1, you can always use an older form theme, or create your own.
If you decide to create your own form theme make sure to update the file twig.yaml file to something like this:
twig:
form_themes:
- form/custom_form_theme.html.twig
In this case, your custom form theme is strored in templates/form/custom_form_theme.html.twig
I have a String variable that holds a reference to an icon, which I want to bind in the HTML to show it, as an attribute selector.
Code Snippet
.html
<thumbnail {{ obj.getIcon() }}> </thumbnail>
.ts
getIcon() {
return "icon-obj" + this.id;
}
Output
<thumbnail "icon-obj1"> </thumbnail>
Desired Output
<thumbnail icon-obj1> </thumbnail>
Known & Undesired alternative solution
<thumbnail class={{ obj.getIcon() }} > </thumbnail>
Basically, the string quotes are screwing everything. It works if I use a different type of selector, like I showed in the example above that outputs to class="icon-obj1", but that's not the point.
So, any suggestion?
Thanks for reading!
There is no way of doing this. For dynamically added attributes or classes no directives or components are created anyway - only for statically added element-, attribute-, and class-names.
For adding components dynamically use DynamicComponentLoader.
I don't know yet if this also works with directives though.
How would you change an html attribute based on the model?
I'm trying to change an input's placeholder text based on a length of an array:
<input placeholder="{{todos.length ? 'Insert todo' : 'Insert your first todo'}}" />
But that doesn't seem to work...
JS Bin code example.
The ternary operator doesn't seem to work in this case, instead of doing this
{{cond ? true : false}}
Change it to
{{ exp && true || false }}
So your placeholder attribute would look like this (I have shortened it for demonstration purposes)
placeholder="{{todos.length > 0 && 'Insert' || 'Insert first'}}"
For anyone else who comes across this (like I just did via Google), it looks like Angular recently added support for the ternary operator in expressions. I just used it successfully in 1.2.16 to dynamically update a tooltip (title) attribute. It seems to have first appeared in the documentation for 1.2.17, although they still generally discourage its use:
From: AngularJS: Developer Guide: Expressions
Apart from the ternary operator (a ? b : c), you cannot write a control flow statement in an expression. The reason behind this is core to the Angular philosophy that application logic should be in controllers, not the views. If you need a real conditional, loop, or to throw from a view expression, delegate to a JavaScript method instead.