I have to render HTML content using AngularJS, I can do it like so
<div ng-bind-html="myHtmlContent"></div>
And it works, but the only problem I have is I don't want to render it inside a string, I rather want it to just render it where I want to render it. e.g
<div>
<h2>{{page.ttitle}}</h2>
{{myHtmlContent}}
</div>
like here, I don't want to add another div, and load myHtmlContent inside. Is there a way to do that ?
Im afraid you can't, unless you write your custom directive like :
<my-direcive></my-directive>
or
<my-direcive var="myHtmlContent"></my-directive>
You can also put all diectives in one element e.g.
<body ng-app="bindHtmlExample" ng-controller="ExampleController" ng-bind-html="myHTML">
</body>
This is probably not the best practice but should work.
Related
consider that I have several HTML templates and they have custom HTML tags. For ex: c-icon, c-text, c-button etc.
For some usecase(Display other content along with innerHTML), I need to access c-icon tag HTML inside c-text and append it to some text so that I can render it with some other html text. In future, I may have another component called c-badge and even I want to refer and render.
Could you please provide any suggestions for achieving the same?
I'm trying to resolve an issue whereby a HTML element uses a Javascript variable to define the image it should display, but errors on load. Have a look at this line:
<img src="../../Images/{{variableData.data.canEdit}}.png" />
This currently works great, except under the browser's console, it is displaying an error to say that it cannot find the literal string "{{variableData.data.canEdit}}.png". I assume this is because AngularJS is loaded after the HTML elements are rendered by the browser.
How can I work around this?
I did try using the following Angular statement on the element like so:
ng-if="typeof(variableData.data)!=='undefined'"
But I imagine this makes no difference and the browser will still display a not found error message for the .png image.
The page all functions correctly, I just don't want those error messages in the browser's console.
Any ideas?
Many thanks
ng-if="variableData.data"
this should work fine
Change
src="<img src="../../Images/{{variableData.data.canEdit}}.png" />"
to
ng-src="<img src="../../Images/{{variableData.data.canEdit}}.png" />"
This makes sure it doesn't attempt to load until runtime of the javascript.
Changing the ng-if to just the variable (ng-if="variableData.data.canEdit") will make sure the element is loaded after the variable.
You have to put just variable like this
ng-if="variableData.data.canEdit"
Thanks to #PierreEmmanuelLallemant for answering this one in the comments.
The solution was to use ng-src within the img element, and then wrap the img element within a div and use an ng-if. Like so:
<div ng-if="variableData.data.canEdit"><img ng-src="../../Images/{{variableData.data.canEdit}}.png" /></div>
Using ng-src ensures that when Angular loads it sets the source attribute. Wrapping the img inside a div with ng-if makes sure that anything inside the div is not rendered until variableData.data.canEdit is defined.
Many thanks
I have a page that allows users to customise a design before downloading it. I have a list of designs that when clicked on display a different HTML layout. These HTML layouts are stored in a database as a string of HTML. To display these, i use:
<div [innerHTML]="myDesignHTML | safeHtml"></div>
As super basic example of one of the HTML strings is the following:
<div id="wrapper">
<div id="content">
<div id="title">titleText</div>
</div>
<div id="footer">
<p>footerText</p>
</div>
</div>
As I can't perform data binding on the actual HTML template that's inserted, I find the IDs of the elements and replace the 'placeholder' text with real user data. The issue I'm having is that my page also needs the ability to change colours of elements on the page. I've partially achieved this by doing the following for example:
document.getElementById("content").style.backgroundColor = color;
However, this doesn't always correctly update the DOM and feels a bit sketchy. Is there anything within Angular that allows the same functionality as [ngStyle] but within dynamic HTML templates that are inserted through [innerHTML]? When the user wants to change the colour of the background, or the text, it would be great to have a variable in the component.ts that get's updated and for the HTML template to react like [style.border-top-color]="mainCOlor" or something of the sort?
It seems that you can use the Renderer2 (see https://angular.io/api/core/Renderer2) in Angular. You would want a template reference do your div, and then you would use the nativeElement property to pull the current template. This is a better way to interact directly with the HTML inside of a div.
I have a DIV HTML element that displays some HTML from a variable:
<div contenteditable="true"
ng-bind-html="renderHtml(currentOperation.description)"
ng-model='currentOperation.description'></div>
It renders just fine.
When I type text into the DIV the changes are NOT reflected in the scope variable currentOperation.description
I need a 2 way street here, as is the case with all Angular variables using ng-model
I think you need 2 different things in your case. I would have one to write the content as text, and one to display it. Then either you have the 2 of them like a preview mode, or you use a 3rd variable to know if you are in edit mode or not.
For example:
<textarea model="description" ng-show="edit"></textarea>
<div ng-bind-html="description" ng-show="!edit"></div>
But the best would be to use a WYSIWYG tool I guess. Most of them allow you to write your own HTML. I use this one https://github.com/fraywing/textAngular
I am making help content documentation for an already made software (the kind of which opens in every software when you press F1 or navigate to the Help section in the menu bar). I am using simple html/CSS/js pages to do so.
There is a ton of the same text descriptions of various software properties that appear in more than one page. The idea is to make a single text source file, where all the text descriptions are located and then use some sort of referencing to that specific text section wherever necessary.
Kind of a similar to using a CSS stylesheet to apply styles over all of the pages, only this handles text instead of styles. This way I would be able to change text in only one file and it would apply everywhere it is used.
I ran across the html SSI method, but this only includes the entire html page and not just a specific text section the way I would like to. I would strongly avoid using different file for each text section.
Can anyone please point me into the right direction here?
I think that you can make a JavaScript function that contains the common texts and use this functions in your code whenever you need them, for this the JavaScript that you create should be an external file and you can reference it in every html page you need it.
For example, you can have one function that returns "Hello World" and set this to a "p" element with the id="title". So in every page where you have an element with the id title you can call your JavaScript function to set its text to "Hello World". Use this link to find out more about this topic:
http://www.w3schools.com/js/js_htmldom_html.asp
UPDATE: I did a little test, i created the following JavaScript:
function helloTitle(){
var text = "Hello World!";
document.getElementById("title").innerHTML = text;
}
And referenced it in some HTML pages like this:
<script src="commonText.js" type="text/javascript"></script>
After that i only need to call the function in the element i want it to modify:
<p id="title"><script>helloTitle();</script></p>
This is a solution if you are only using JS, CSS and HTML. There should be other ways to achieve this.
Hope this information could help you!
I figured out how to do it a little more comforatbly on a large scale using the html command https://www.w3schools.com/tags/tag_iframe.asp
in your main html file you do:
<p> <iframe src="Text.html" width="100%" height="300" style="border:1px solid black;"> </p>
and then with some basic html formating insert whatever text u want
<html>
<body>
hmm idk what i should put here. Test
</body>
</html>
there will also be some css formatting needing to be done before it look perfect, but if you want to make multi line blocks I think this is the easiest way to.