This question already has answers here:
Angular 2 innerHTML (click) binding
(7 answers)
Closed 4 years ago.
I'm trying to bind html content to a div in my Angular 6 app but it doesn't work.
Here is the content:
let content = 'Hello <a routerLink="['/Soja']">Nick Soja</a> How are you ?'
Here is the html part:
<div class="content" [innerHTML]="content"></div>
Now only Hello is binded. I don't see the rest of the html content. The expected result is:
'Hello Nick Soja How are you ?'
What's wrong ?
You can't use angular directives inside the innerHTML input value, it expects valid HTML. So that HTML is stripped from the code.
The HTML string being converted to HTML by the innerHTML directive won't be compiled. So that also means you can't use things like databindings inside the HTML string.
Try to remove the routerLink directive. I believe it doesn't work because [innerHTML] cannot compile angular directives and components, only static HTML.
just use: tick (``) instead of single quotes ''
content = Hello <a routerLink="['/Soja']">Nick Soja</a> How are you ?;
or try this:
define your link in .ts file
link = '/Soja'
and bind it to router link in your template file
<div class="content" >
Hello <a routerLink="link">Nick Soja</a> How are you ?
</div>
Related
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>
i have an ng-repeat but i need to use Angular expression inside javascript of my html page(of course app and controller are declared, but have not been posted here):
<div ng-repeat="eleRubrique in scopeComplet">
<script type="text/javascript">
alert('index ' + {{$index}});
</script>
</div>
That does not work. what would be a workaround ?
Thank you for an answer.
I think this would work for you
<div ng-repeat="eleRubrique in scopeComplet" ng-init="alert('index ' + $index)"></div>
And if you would need a more complex script I would recommend to write a function for that and call the function from ng-init
You should not use double curly braces {{}} in JavaScript. They are meant for HTML only in Angular.
Since the JavaScript code in your HTML has nothing to do with the view, can you not achieve the same goal in the controller?
I'm trying to create some website about AngularJS in AngularJS ;-) I've added ng-app on body element, and now all my code snippets (which are all in <pre><code> ... </code></pre> tags) are parsed by angular (it adds ng-binding class for example). Is there a way to tell angular that given block is only code snippet and should't be parsed?
Yes, you can use the ngNonBindable directive
For example:
<div ng-non-bindable>Ignored: {{1 + 2}}</div>
This question already has answers here:
Get selected element's outer HTML
(30 answers)
Closed 8 years ago.
Hello everyone,
I'm a little bit confused here, trying to store couple of html elements into a variable.
But when I try to print out the content of my variable, some elements are not being displayed. is that some kind of magic :) or what I'm doing wrong exactly?
This is then causing issues in my other functions, which are trying to find certain elements in the variable.
var template = $(" <div class='item'><span id='item_stats_info'> <div id='item_name'> </div> </span> </div>");
console.log(template.html());
Result:
<span id="item_stats_info"> <div id="item_name"> </div> </span>
Could you guys advise me on what's the best way to store html elements in a variable?
Thansk in advance,
Alex
The .html() method of jQuery returns the HTML inside of the element, since you need to get the outer HTML, you can try wrapping it in another div:
var template = $("<div> <div class='item'><span id='item_stats_info'> <div id='item_name'> </div> </span> </div> </div>");
console.log(template.html());
Use this to get the full html, not the inner html....
console.log(template.prop('outerHTML'));
I have several templates for faceboxes (lightbox) that I need at different points of the application. These are stored in different partials and files.
I will initialize different javascript functions in accordance to which ones I need. The question is, what is the best way to append the external HTML page into my body using javascript?
Since you tagged the question with it, here's a jQuery solution.
$("body").append("text");
Remember that the parameter can also be a DOM element. So you can do this :
var p = $("<p/>").text("a paragraph");
$("body").append(p);
the easy way with jQuery is:
$('#result').load('test.html');
<div id="result"><!--/ Hold My Data! /--></div>
obviously you can change #result with body
Also you can try some templates library..
Like handlebar and underscore..
and append in the el provided by backbone.js
Suppose you want to append this html in your template, then you can use the below code according to your application
Consider the code
Example 1:
rowData += '<div style="width: 130px;">'+param1+'</div>';
rowData += '<div style="width: 130px;">'+param2+'</div>';
$('#ID').html(rowData);
and please make sure that the js should be include in that file.
Here is the information of variable used above:
row data - the html that you want to append,
param- if you want to show the value of java script variable on browser dynamically,
#ID- ID of the div in which you want to append this html
example 2:
Consider the following HTML:
<h2>Hello World</h2>
<div class="user">
<div class="inner">Hi</div>
<div class="inner">Bye</div>
</div>
You can create content and insert it into several elements at once:
$( ".inner" ).append( "<p>Lorem Ipsum</p>" );