Lets suppose I want to print the following html:
<a href..?> </a>
and I have it inside some expression.
how can I print it so it will be clickable using {{x.something}} in angular js ng-repeat?
You can do 1 of 2 things.
Use $sce service with the ng-bind-html attribute. $sce requires that you call $sce.trustAsHtml() around the html content before binding to the UI.
Use ngSanitize (by adding it as a dependent module) and then use ng-bind-html
Related
I was wondering how can I substitute doing something like this from AngularJS to Angular:
<li ng-repeat="node in ctrl.nodeTree" ng-include="'nodes_renderer.html'"></li>
I have been trying to do this, but I am not sure it is the right way as it not working and Angular is not complaining.
<li *ngFor="let node of nodeTree">
<nodes-renderer></nodes-renderer>
</li>
So I am trying to make my own custom tag from nodes_renderer.html but I want some input on which way would be better to achieve this.
It is important to mention that my "< li >" tag is being used inside another custom "component" element tag that I have created only with css (so it doesn't have a template) in a Hybrid AngularJS-Angular app, where I am downgrading Angular components.
Hi I have an Angular2 app, and in one of the components I have an attribute that I want to display. The problem I have is that I'm using Pug as my template engine and the attribute I'm trying to display contains HTML tags, how can I get Pug to interpret this code as its own syntax?
So for example I try to display something like this in my template:
p {{attribute}}
Where attribute is something like this:
<h2>Sample Text.</h2>
I've tried this p #{attribute} but it doesn't work.
Turns out it wasn't a Pug problem and had to be resolved with Angular2 by adding [innerHtml] to the element:
p([innerHtml]="attribute")
It's possible to use property as HTML tag name?
Something like this or similar:
<{{property.name}}>Hello world</{{property.name}}>
That's not supported. Tags and attributes used as component or directive selector need to be added statically.
If you want to add components dynamically you can use ViewContainerRef.createComponent like demonstrated in Angular 2 dynamic tabs with user-click chosen components
no you can use like this
<label>{{property.name}}</label>
or
<htmltag>{{property.name}}</htmltag>
What is the difference between ng-include and ng-bind-html in angular??
imagine a case when based on some parameters the html will change rather to be for example an image tag or span tag; so There should be a mechanism to add that dynamic html
for example
<!--dynamichtml : <span class='glyphicon glyphicon-plus'></span>-->
<a ng-include="'dynamichtml.html'"></a>
<a ng-bind-html="dynamichtml"></a>
ng-bind-html is described as follows:
Evaluates the expression and inserts the resulting HTML into the element[...]
ng-include, on the other hand
Fetches, compiles and includes an external HTML fragment.
The value in ng-bind-html should evaluate to valid HTML. The value in ng-include should evaluate to a valid URL.
ng-bind-html
ng-bind-html is used when one has a model that contains HTML in the string format. On binding the model with that of the DOM, this gets updated in the element, as its child.
ng-include
This adds an external html file in the DOM. Here, it doesn't gets bind, but only gets attached.
It depends upon the application and the model states, based on which one can decide with which directive to make use of.
Here, you can read more about ng-bind-html and ng-include.
I have this key/value in a Json file to use in angular-translate:
{"MEETING_LINK": "<br/>Maybe you want to see the <a class=\"pink-link\" ng-href=\"/{{meetingLink}}/{{meetingId}}\">full meeting<a/> first?"}
When I invoke the translate in my html like this:
<span
ng-bind-html="'GLOBAL.REMOVE_MODAL.MEETING_LINK' | translate:
{ meetingLink: meetingData.buttonLink, meetingId: meetingData.id}">
</span>
It does not work. But if I replace the ng-href in the anchor:href="/{{meetingData.buttonLink}}/{{meetingData.id}} It works.
Besides I want to add a ng-click to the anchor element, I guess angular directives in the html do not work.
Can I do some trick to make this happen?
Try adding translate-compile to your span if you're using angular-translate 2.x.