Display other content along with innerHTML - javascript

I have a component where it renders the tags depends on the data passed as shown below:
<ng-container>
<ng-container [ngSwitch]="tag">
<p *ngSwitchCase="'p'" [innerHTML]="_getString()"></p>
<h1 *ngSwitchCase="'h1'" [innerHTML]="_getString()"></h1>
<h2 *ngSwitchCase="'h2'" [innerHTML]="_getString()"></h2>
<h3 *ngSwitchCase="'h3'" [innerHTML]="_getString()"></h3>
<h4 *ngSwitchCase="'h4'" [innerHTML]="_getString()"></h4>
<span *ngSwitchCase="'span'" [innerHTML]="_getString()"></span>
<code *ngSwitchCase="'code'" [innerHTML]="_getString()"></code>
<time *ngSwitchCase="'time'" [innerHTML]="_getString()"></time>
</ng-container>
I want to render an icon beside each text whenever required.
<span *ngIf="icon" class="css-{{icon}}" role="presentation"></span>
If I put the icon tag in between each tag, it gets replaced by the innerHTML data.
Is there any way I can render both the icon(using ng-content or something like that because I dont want to write the icon html inside every element) and innerHTML data?
I am new to Angular world so trying to learn. Any help would be appreciated.
Thank you.

It seems that your question is not specific for Angular, but a JavaScript behavior.
innerHTML gets or sets the HTML or XML markup contained within the element. So it means that it replaces whatever content was there to start with.
(https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)
I think you can try using insertAdjacentHTML() instead - this should add HTML to the element that's already present there in the DOM.
Check the syntax and examples here: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

Try passing the icon wrapped in a span tag to _getString() method. configure your method such that it returns the icon and the text
E.g
getString(icon){
return <span> ${icon} </span> your string here
}
in this case every time you call _getString pass the desired icon

Related

How can get the text of <a> tag without id using only javascript

I am attaching a javascript to the following a tag section
<a class="btn-button button" onclick="myAlert()">
</a>
And this is my javascript function
<script>
function myAlert() {
alert('Test..');
}
</script>
How can I get the current text been assigned when the javascript will fire?
As you can see there is not id been set in the a tag.
EDIT
I know that right now there is not value but I was just copy my actually code. At some point there will be a values since it is used from other components including Angular.
I can't tell which proper Angular way to do this as you haven't shared Angular code, but this is how it can be done in vanilla HTML/JS:
In the onclick, set this as an argument to your function, so that you can receive the HTML element that called it.
Then you can use either textContent or innerText (see list of their differences in this MDN page) to get or change the text value.
function myAlert(element) {
alert('Test..' + element.textContent);
//adding something so that we can see it's dynamic
element.textContent += ' bla';
}
<a class="btn-button button" onclick="myAlert(this)">
click me</a>

Insert schema data inside html tag with javascript

I am wondering if there is a way to insert text, schema data in particular, into a html div tag using javascript. I know there are methods for modifying existing values inside a tag such as class, href, title, but can't seem to find a way to add something new.
Basically I have <div id="main"> and I want to modify it to be <div id="main" itemtype="http://schema.org/SomeCategory" itemscope> and to be able to remove it later.
The context for such a need is using fetch / js to replace parts of webpages rather than reloading the entire page. The product pages use the schema notation, whereas general info pages do not, though all templates use the "main" div.
Unbeknownst to me, the innerHTML function attached to the body tag allows me to change actual div tags using replace. So it is simple:
input ='<div id="main">';
output='<div id="main" itemtype="http://schema.org/SomeCategory" itemscope>';
document.body.innerHTML = document.body.innerHTML.replace(input,output);

How to replace text inside specific elements using javascript or any other qualified language?

I have this block of HTML(i don't want to change the code):
<section class="welcome-block-top">
<div class="inside">
<h2>Start a good life</h2>
<label>text to replace 1</label>
<a href="" class="link-a">
some text i do not want to replace</a>
</div>
</section>
i want to replace the text "text to replace 1"
i also want to replace text here:
<h3>
<span>
text to replace 2 </span>
</h3>
please teach me masters, i searched Google and stack-overflow and i dont seem to get something that works in my situation.
Something using the onload js method is preferable because the webpage is dynamically loaded.
if you know a better method to do this with any other language don't hesitate to inform me.
If there is a method to clear the text inside the elements and then insert new text i would be grateful.
You can use JQuery which can easily change the content of the tags.
oldContent = $("div.inside label:first").html();
$("div.inside label:first").html("put your desired content here");
meaining that find first label tag in the div tag having inside class and change its html content with the parameter.
EDIT:
You can of course save the old content and use it.
$("div.inside label:first").html(oldContent + " new content");
or
$("div.inside label:first").append(" new content");
It depends on your real use case but it might be this :
$('*:not(:has(*))').text(function(_,t){
return t.replace("text to replace 1", "replacement")
});
The main idea here is to apply a transformation to the text of all elements with no children (leafs in the DOM tree).
If you have more complex needs, or performance requirements, you might want to have a look at dedicated libraries, like mine : https://github.com/Canop/groumf

div in headline tag autocloses

I've got this HTML-Content. I knew that this is not correct HTML but I can't change it because it's user generated by a WYSIWG-Editor and this mistake was done hundered of times by users:
<div>
<H2 style="COLOR: #0000ff"> <DIV align=left>TEXT<br /></H2></STRONG>
</DIV>
</div><br />
Problem is that the Div AFTER the H2 Tag is closed AFTER the closing Tag from the H2.
What happens is that the H2 autocloses the enclosed DIV and the original closes the Div above.
As I can't change the Sourcecode in those masses of Content-Files, is there a way to prevent this behaviour with CSS???
CSS won't fix this. If this is generated by the editor specifically then you need a new editor. If you're setting content in JavaScript based on the content of an editable region you might be in luck. Browsers auto-close tags as the content is assigned. Say you have JavaScript to handle that content, and you're assigning that HTML to an element. When it's assigned to the element it will add the closing tag, and then when you go to programmatically close the tag at the correct time you'll get the duplicate close. I found when I do this I need to store the HTML into a string var temporarily, and then assign the HTML when it's all complete. If you need a quick lightweight html5 editor I have one at http://www.makrit.net/5edit

How to use ng-bind-html with two-way databinding?

I'm currently working on a simple editor built with angular. The main textbox is just a div with the contenteditable set to true and the ng-bind-html attribute, like this:
<div contenteditable="true" ng-bind-html="field.content">HTML content here</div>
The value is set and rendered properly with the right tags and look at page load. But since it's only bound one way I my data or model isn't updated upon edit.
I've tried some contenteditable directivs but most of them requires ng-model, but if I add that my html tags are not rendered and converted into symbols.
How would I go about updating my data after the div's content have been changed and also keep the HTML tags and so on formatted correctly?
EDIT: Just using this temporary "fix" for the time being, but I would like something more robust.
<div contenteditable="true" ng-bind-html="field.content"
ng-blur="saveHTML($event)"></div>
$scope.saveHTML = function(event) {
this.field.content = event.target.innerHTML;
}

Categories