angular binding removing returns - html

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.

Related

How I can use curly braces inside a div element in Angular?

<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.

How to write an XPath query for text within <script> using PhantomJS

I am trying to scrape some specific content that sits within the <script> section of a page (at the bottom of the page before the end of the tag. It is my understanding that this can't be done with regular XPath, so I will be using PhantomJs cloud via SEOTools for Excel plugin.
Please see code below:
<script> window.__INITIAL_STATE__ = {"questions":{"list":{},"status":{}},"sites":{"list":{"SEOTest":{"joined":"2016-04-17T22:00:31.000Z","threshold":[],"abn":"8724483318952",
I want to be able to scrape the text after "ABN" field, so the xpath would return "8724483318952". Does anybody know how this can be done with xpath?
To retrieve the desired target string value of "8724483318952" you can use the following XPath-1.0 expression:
substring-before(substring-after(script,'abn":'),',')
It gets the desired string from the <script> tag and its output is
"8724483318952"
The signature of XPathUrl is, according to this link:
=XPathOnUrl(
string url,
string xpath,
string attribute,
string xmlHttpSettings,
string mode
) : vector
So the whole expression could look like this:
=XPathOnUrl(A2,"substring-before(substring-after(//ul[#class='headshot']/script,'abn":'),',')")
I'm not sure that this expression really does work, but it should give you a pretty precise idea of how to handle XPath expression generally.

Binding An Array Entry in an Image Source

<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]">

Not able to select a text using selenium

I have a readymade code and i'm trying to write tests for it using selenium. This is how my code looks like in element tab of chrome:
<table id="xyz">
<tbody>
<tr>...</tr>
"
I am not able to retrieve this text.
"
</tbody>
</table>
Doing this $x("//*[contains(text(),'I am not able to retrieve this text')]"); in console tab of chrome shows no results. I'm able to get text by this command if the text is defined in a div, span etc. (Also case sensitivity is not a problem).
In code that text is appended in tbody using jQuery('tbody').append( abc() ); and abc() function returns this text in this way pqr.html();
Now my questions is what xpath expression should i write to grab this text? And i am looking for a pure xpath expression i.e no java functions etc.
contains() expects singular value as the first parameter. An HTML element may have more than one text nodes children in it, in which case, your attempted XPath will evaluates only the first text node. According to the sample HTML posted, the first text node of <tbody> which will be evaluated consists of newline and some spaces, hence your XPath didn't consider <tbody> a match and returned no result.
To avoid the problem explained above, use contains() in predicate for individual text nodes like the following :
//*[text()[contains(.,'I am not able to retrieve this text')]]
or this way if you want to return the text node itself instead of the parent element :
//*/text()[contains(.,'I am not able to retrieve this text')]
That table element is probably within a frame. To access contents within a frame you need to first switch to it. You can use the "switch to" method in selenium. Refer this answer and this one.
For the same reason it is not working in the Chrome Dev Tools console. In the console tab, there is dropdown containing a list of frames. Make sure you select the correct frame in which the specific element exist and then execute your XPath.

Why SafeHtml only shows plain text & does not show formmatted text (GWT)?

HTML myHtml=new HTML(SafeHtmlUtils.fromString("<i>Test</i>"));
HTML myHtml2=new HTML("<i>Test2</i>");
testHTMLPanel.add(myHtml);
testHTMLPanel.add(myHtml2);
OUTPUT:
<i>Test</i>
Test2
The right output should be the formmatted text like the second one. Other Gwt html widget also have the similar problem.
I am using Eclipse Juno.
SafeHtmlUtils.fromString(String s)
HTML-escapes its argument and returns the result wrapped as a SafeHtml.
That means that you get somthing like &#6.0;i&#.62;Test&#.60;&#.47;i&.#62;
Check
https://developers.google.com/web-toolkit/doc/latest/DevGuideSecuritySafeHtml
It's a security thing:
The reason why you have SafeHtmlUtils.fromString(userString) is that you can take a dynamic string, for example from a user input, and create a html text from it. It's more safe than just use Html.setText(userString) because with setText(userString) it would be feasible to inject vulnerable code.
more about input validation: http://www.testingsecurity.com/input-validation