ngStyle Problem with receiving colors from an object/model - html

I have designed a special shape with html/Css and I want to receive its color from a data service.
[ngStyle]="{'background-color':'#0B0036'}"
when I use this code, everything works fine. but as soon as I try this:
[ngStyle]="{'background-color':'{{Card.lesson.color}}'}" (with or without quote)
or
[ngStyle]="{'background-color':'Card.lesson.color'}"
I either get errors or don't get any color at all.
what is the correct way to write that syntax?

The correct syntax is:
[ngStyle]="{'background-color': Card.lesson.color }"
You are binding an expression into your template, not a string.
See the docs for more details

Related

JSON object inside data-attribute without using the quotes (for the Slick Slider data-slick attribute)

I'm working on a website where I want to add the settings of my Slick Slider trough the data-attribute. This is possible with the 'data-slick' attribute. The format for this looks like this: data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'.
In my WordPress CMS I'm using the plugin 'Data Attributes' to add data attributes to a Gutenberg Block. Trough this plugin all double and single quotes are converted to and therefor changes on the frontend to data-slick="{"slidesToShow": 4, "slidesToScroll": 4}"
This is not working. The Slick Slider doesn't use these settings.
Is there another way to add a JSON object into a data-attribute so it will work with the Slick Slider?
Thanks already for your help!
Kind Regards,
Nick
I think storing a JSON value in HTML is a bad idea. There are too many conditions which you have to take into consideration - backend returning page, WEB server encoding (it can add a custom encoding header), and browser compatibility. For this task, I'd prefer 2 ways: bitwise mask or simple function-for example, define a few data attributes -data-s1, data-s2, data-sn. In the JS code, add an array [ data-s1, data-s2, data-sn]. And finally, add a loop with an in-condition (if data.contains(element of array) - read and then parse the data inside of the attribute). I never worked with wordpress but for JS it is a easy task. If you need example write comment below. I can update my answer

Kendo UI Template notation for encoding doesn't seem to work

According to the Kendo UI template documentation, you can use either the #=Field# or #:Field# notation, with the #:Field# notation encoding the text. However, I cannot seem to get this to work.
I created a field in my model that just returned a string, <b>Todd</b>. Then, I used the template like this:
and also like this:
In BOTH cases, the output was
While I would expect that for the #=Field# notation, for the #:Field# notation, I was expecting:
Any ideas on why this isn't working like I am expecting?
Got a response from Kendo. They said do use #:encodeURI(Field)#, #:encodeURIComponent(Field)#, or #:escape(Field)# instead of #:Field# to get the result I was looking for.
I tested that out, and it did work for me.

Check for visual presence of character on page?

I'm in an odd situation where I need to check, via a test, that a currency symbol is being properly displayed on our web page.
We've been running into issues where sometimes the unicode alphanumeric value is showing up on the page instead of the actual currency symbol itself.
Is there a way to check for something like this? Like with some type of visual checking library, or through javascript?
The answer to this issue was to specifically copy and paste the unicode character I was looking to test against into my text editor.
So using the Protractor framework, I would find my css element, and if I have a known price of 17.99 that should be returning, my test function would return:
return expect(myPriceElement.getText()).to.eventually.equal(£17.99);
If on my webpage, £17.99 shows up, then my test will pass

External Image Link from Parameter

I created a report in SSRS. I would like to add a image to report as External. I inserted a link ("http://www.aa.com/Images/a.jpg") to image object. It is working well. But I change the link (= Parameters!ImagePath.Value + "/a.jpg") in Image value. The Parameters!ImagePath.Value is "http://www.aa.com/Images". It is not working. How can I resolve this. Thanks.
To concatenate Strings in Reporting Services, you must use the "&" operator. In your case, it will be:
=Parameters!ImagePath.Value & "/a.jpg"
I hope this will help you.
It may seem weird, but tried to convert this parameter to a string? It's happened to me something of the genre.
CSTR(Parameters!ImagePath.value)+"/a.jpg"
Another possible solution is to change the "External" to "Embedded" image.

How and when to use Html encode

I've recently learned that i shouldn't store html encoded data in the database, but i should rather html encode the data that is shown on the screen for the user.
No big deal, i have to fix my database records and make some code changes.
But my question is, when should I use html encode and when shouldn't I.
For example, within a html table, I'm writing directly from the database to the inner HTML of a column. Without encoding this would be dangerous, I get that.
What about when setting the value of a textbox. It seems to work without having to html encode the value. But I'm not sure why. This is what the textbox look like:
<input type="textbox" value="xxx"/>
But when setting the value to: "/><p style="font-size: 100px;">testing hack</p>
The html source will be:
<input type="textbox" value=""/><p style="font-size: 100px;">testing hack</p>
It will look fine though when viewed so the p-tag isn't working as intended by the "hack".
Is anyone getting what I'm trying to aim at :) ?
If I do try to html encode something i set to a textbox value, the result will display "&lt" and so on, which is not what I intended.
So in short: Should I only html encode stuff that is set to the innerHtml of html-controls, and not when setting the value of, for example, textboxes?
The answer came out of thejh's and my discussion in the comment to the question. I was not sure what to mark as answer so I decided to answer my own question. I hope that's ok.
It seems like when setting a value of an attribute (like the textbox's "value") .NET automatically html encodes the value so there is no need to do this by yourself.
When setting a html controls inner HTML though, it's important that you do html encode the value.
Thanks Thejh, sorry I couldn't up vote anything u wrote.
edit: I can't mark this as the answer for another 2 days.
in the case of
<input type="textbox" value="xxx"/>
'xxx' is an attribute, and you should use a different encoding. In ASP.NET it's HtmlAttributeEncode for example.
For HTML attributes, encode backslashes and double quotes.
Replace every \ by \\
Replace every " by \"
Oh, by the way: Sometimes PHP does this for you, see here.
This feature has been DEPRECATED as of PHP 5.3.0. Relying on this feature is highly discouraged.