How do I access the text within a web component? - polymer

Given the following example element.
<my-element>
Hello world
</my-element>
What javascript variable would give me "Hello world"?
I've tried a bunch of things. I tried this.innerText, and this.$.content won't show unless the <content> tags are in the <template>.

This works, I'm not sure if it's cross-browser:
this.textContent
Here's how I got there
Polymer/docs/issues/256.
Difference between innerText and innerHTML in javascript

Related

Creating multiple text nodes in HTML

If I have the HTML
<html>
<body>
<div>"Foo" "Bar"</div>
</body>
</html>
is there any way to hav the browser emit "Foo" and "Bar" as two text nodes so it rendered the same as <div>FooBar</div>? I know that, with JavaScript, you can add two text nodes as children of a div to achieve this result, but I'm wondering if it's possible in vanilla HTML. The reason I ask is because I'm workin on an SSR engine that does partial hydration, and the JS engine is looking for several text nodes in an HTML element but I can only manage to create one. Thanks in advance for any tips!

How to use/display string with html tags in typescript

var bannerText = stringFormat("This is my {0}test content{1} here", "<b>", "</b>");
<div>
<p> {para1}</p>
<p> {bannerText}</p>
</div>
html tags gets printed instead of applying them as text
Observed output
This is my <b>test content</b> here
Needed output
This is my test content here
<div [innerHTML]="bannerText"></div>
However, keep in mind Angular's docs about security, which says Angular recognizes the value as unsafe and automatically sanitizes it, which removes the <script> tag but keeps safe content such as the <b> element..
check the below code it might help you.use innerHtml
document.getElementById("name").innerHTML="This is <u>my test</u> sample"
<div id="name"></div>
.
Observed output This is my <u>test content</u> here
Whatever method you are using is escaping the html e.g. < / > etc.
Fix
You need some version of set HTML.
e.g. React : dangerouslySetInnerHTML, Pure JS: Use innerHTML
Warning
Be careful, setting html exposes your app to XSS : https://en.wikipedia.org/wiki/Cross-site_scripting

Access value of a hidden div from inside an angular app in an iframe

I need to get a value of strings in a hidden div from inside an angular app. Here is what I have:
<iframe id="sample">
<html>
<head></head>
<body>
<div id="testString" display="none;">string </div>
<app></app>
</body>
</html>
</iframe>
How can I access the value of div testString inside the Angular app in non root component?
tried with these and get null:
window.parent.document.getElementById('testString').textContent
document.getElementById('testString').textContent
Can it be done with ElementRef?
Also how can I secure this string against injection and xss attacks?
Thanks
Angular is just Javascript (well, typescript which is also just Javascript with types). So you can do the exact same thing in Angular as you would in raw Javascript, just put it under a ngOnInit method in the component so that document has loaded. If you've used jQuery, this is basically the equivilant of $(document).ready().
For the record, I'm not saying that there wouldn't be a more "Angular" way to accomplish what you're asking. ElementRef would also work, as it's basically just a wrapper around document.getElement*. My point is that you don't need to write anything special just because you're using Angular.

Is there a way to safely hide HTML tags in AngularJS?

I'm recently starting to explore AngularJS, and of course, i know it is ran at the client side, and since SPA (Single Page Applications) are becoming more and more common, i have a question regarding how to safely hide HTML elements.
Let me give a simple example:
Employee
<div ng-show="canSeeSalary">
{{salary}}
</div>
Now, of course, at runtime the div tag related to the salary won't be displayed, however by seeing the HTML source code, or using a developer tool like the one we have in Chrome, it would be possible to see the tag and probably its value.
I know tags like these should be filtered at the the server-side, of course, but since it has come to the client side, the div will be there.
My question is exactly, if there is any way i could hide these divs from the HTML source code, without needing to mix AngularJS with JSTL, for example.
Thanks in advance.
Try ng-if directive:
<div ng-if="canSeeSalary">
{{salary}}
</div>
Corresponding div element will be removed from the DOM. From the official documentation:
The ngIf directive removes or recreates a portion of the DOM tree
based on an {expression}. If the expression assigned to ngIf evaluates
to a false value then the element is removed from the DOM, otherwise a
clone of the element is reinserted into the DOM.
Use
Employee
<div ng-if="canSeeSalary">
{{salary}}
</div>
ng-if completely removes and recreates the element in the DOM rather than changing its visibility via the display css property
I would recommend using ngCloak rather than ngIf.
The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
example:
<div ng-cloak> {{::test}} </div>
ngCloak # Official Angular Docs

Can I plug text into HTML from elsewhere?

I'm new to web development and I'm working on my second website. I feel it should be a basic question and probably have already gotten addressed somewhere on Stack Overflow. However I can't find anything directly relevant, due to a lack of precise description. The problem is:
Because I'm doing copywriting along the way, frequently I find myself needing to update the copy inside the HTML code wrapped deep inside many div's. It's quite inconvenient; and because of texts, codes can sometimes get messy.
I wonder if there's a simple way to leave a "handle" in place of texts inside HTML code, "plugging in" text from elsewhere, like plugging in style from CSS? I suppose it should work in a concept similar to what a CMS have.
With jQuery, you can use .html to plug text and symbol to html page
<html>
<head>
<title>Your page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
$("#statictext").html('<b>jQuery</b>');
$("#symbol").html('©');
});
</script>
</head>
<body>
<div id="statictext"></div>
<div id="symbol"></div>
</body>
I think what you're looking for is the id HTML attribute. You can use it like this from javascript (i'm using js since you don't specify a language):
var yourelement = document.getElementById('yourelementid');
yourelement.textContent = "Yer text";
with your html being:
<div id="yourelementid"></div>
with the element being a div or any other element that can have text content.
If you need to insert HTML, you can do it through .innerHTML or, preferrably, manipulate the DOM, by adding and removing elements. CSS also has an attr() property function, which allows you to set an arbitrary property on an HTML element (such as piece="textstuff", with the css being content: attr(piece)).
You can also construct elements and append them (again, if what you want is to insert HTML markup) by using .appendChild and .removeChild.