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")
Related
In my TS file I have declare variable as element and inside that written one paragraph tag with some text
element ='<p>Something written</p>';
I want to show this as paragraph in my html file....
I tried to achieve this using below way in my html file
{{element}}
But in html it is showing as it is with the (<p>,</p>) open and close tags
<p>Something written</p>
How can I achieve this?
Please see the following example on Stackblitz.
Have a property in your component that contains HTML tags like below;
text: string = '<strong>Example of innerHTML in Angular.</strong>';
Refer to this property in your template (i.e. HTML file) as follows;
<p [innerHTML]="text"></p>
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>
I'm importing rss items where in description there is a lot of html code (links, paragraphs, etc...). When I'm viewing it in component's view like:
{{rss.description}}
the output in site is like:
Something <p>Long text</p>
How can I quickly and easy parse it to html? I don't want to cross it with jQuery. Thank you
Not sure if I understand your question correctly, but this might be what you want
<div [innerHTML]="rss.description"></div>
See also In RC.1 some styles can't be added using binding syntax for how to allow "unsafe" HTML.
<div class="innerhtml-class" [innerHTML]="variable.innerHtml"></div>
To add styles:
Component selector is: app-my-component
Add a class to the element hosting the innerHtml content in app-my-component template:
Add to the global styles file located in angular project src folder:
app-my-component {
.innerhtml-class {
declaration goes here
}
}
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.
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.