Simple react application trying to add open attribute in span tag its not rendering in html output
Same is working as expected in simple HTML page
HTML Sample: https://codepen.io/karthikeyan-sivagurunathan/pen/qBKvVgQ
<div>
<span open="(" close=")">
<span>x2+y2</span>
</span>
<span>=z2</span>
</div>
React Sample: https://codepen.io/karthikeyan-sivagurunathan/pen/vYrPWQw
I don't understand what are those open and close attributes for span tag...
but maybe you want something like this?
<details open={false}>
<summary>2+2</summary>
<span>=4</span>
</details>
Related
I have an input type=text where my user will type his own HTML template.
I have a button that opens a modal which shows the formatted html as a "preview html template".
Whenever the user Clicks on my preview_button, it opens a modal that shows the html the user typed before. This is part of the modal, this is how I'm inserting the html:
<div class="flexBox mg-2">
<span [innerHTML]="my.element.text"></span>
</div>
Although it is working and showing the text correctly. It doesn't allow me to use style formatting. So If my user write this on the text_input
<h1 style="color:red;">Hello World</h1>
When the modal opens, I can see the text but not the color styling.
I found a few topics here suggesting to use this.sanitizer.bypassSecurityTrustHtml, but I also read its kind of dangerous and also it messes all my pages style up, so I can't use it.
And a few examples showing how to do this with a static html(on class constructor).
Edit
Tried to use iframe.
It works like this(inline css):
<iframe srcdoc="'<h1 style='color:red;'>Hello World</h1>'"></iframe>
Also works like this(style tag):
<iframe srcdoc="<h1 id='pp'>Hello World</h1><style>#pp{color:red;}</style>"></iframe>
BUT when I try to use interpolation it no longer applies the style. (due to the Angular Policy)
<iframe [srcdoc]="components.body.text"></iframe>
Any good/correct/safe way to do it when the html is dynamic?
I have an Angular 6 application where a component is used to display a message on the page. Some of the messages contain hyperlinks embedded in them (in HTML markup). However, when the messages are displayed on the page, they are getting displayed in plain text (hyperlinks are not rendered, but the markup is displayed to the user instead).
You can visit Stackblitz # https://stackblitz.com/edit/angular-jj5nms for a sample application that I created to explain the issue.
Expected message display:
Click here.
Actual message display:
Click <a href='http://www.google.com'>here</a>
If you want to render HTML a then you need to bind to the innerHTML property of an element, for example:
<p [innerHTML]=“message | async”></p>
Where message is your observable from the service.
Using handlebars to render message is just rendering plain text, binding to innerHTML and using the async will render your html content
You can use innerHTML
In your component:
linkHtml = "Click <a href='http://www.google.com'>here</a>"
In your template:
<div [innerHTML]="linkHtml"></div>
You can use like that:
in your .ts file :
dummyLinkText: string = "Click <a href='https://www.google.com'>here</a>";
and in your .html file:
<div [innerHTML]="dummyLinkText | translate"></div>
How can I get html-code of a webpage from an angular directive?
in my example I have an html code:
<div class="modal-body" data-ng-bind-html="myHTML">
</div>
I want to place inside the div the content of another page! In my directive I do something like:
$rootScope.myHTML = link;
Where link should contains the whole html of the page! If myHtml="http://www.google.com", how can I retrieve the content of 'link'?
It sounds like you really just want to apply the external site inside your view, and then you should just link it in an iframe.
<iframe src="http://www.google.com"></iframe>
you can directly insert all the html of directive in html it self only. In your parent html you can insert directive.html like
<directive></directive>
My code returns HTML data from ASP.NET as a response from an action method.
I am displaying this in a <textarea> element.
<textarea style="width: 85rem; height: 15rem;"
ng-disabled=true
ng-model="access.response"></textarea>
However when it displays I see the actual HTML.
How can I make it so the information displayed in the textbox or some other way is the same as in my browser window? Note that I do not want to edit the data but I would like the scrollbar type feature.
Is correct to say that you cannot display it in a textarea, but you can't use a simple div neither to display the parsed HTML.
Take a look at this Plunkr --> http://plnkr.co/edit/ld4Nte2KKIbgMkIWnRcP
You have to make use of the $sce service and the ng-bind-html directive, like this:
<div ng-controller="SimpleCtrl">
<!-- This will be parsed as HTML-->
<div ng-bind-html="to_trusted(someCode)"></div>
<!-- This will not -->
<div>{{someCode}}</div>
</div>
No way to do it with textarea.
If you want editable HTML content, consider this:
<div contenteditable="true"></div>
I have seen html templates created using any of the following tags
<textarea>
<script>
<div>
Which one is better and why?
Which of the following way of creating html templates is better and y?
CSS:
.template {
display: none;
}
textarea :
<textarea class="template" id="tmpl1">
<div>adfsdfsdfs</div>
</textarea>
script :
<script type="text/html" id="tmpl1">
<div>adfsdfsdfs</div>
</script>
div :
<div class="template" id="tmpl1">
<div>adfsdfsdfs</div>
</div>
I had faced problem with script tag here
i would suggest none of the above options take a look at Mustache it was created by one of the founders of git hub
http://mustache.github.com/
definitely my favorite way to do html templating
They are all poor choices.
textarea is designed to accept user input
div elements are designed to present content to the user
script elements are designed to hold programs
If you want to embed a template into an HTML document, then I'd write a JavaScript program to store it in a variable (and use a json serializer to generate the JavaScript literal that gets assigned to that variable). That program can then go in a script element.
Alternatively, store the template in a data-* attribute on an appropriate element.