i am trying to display data from API in Angular 8 But this API include a html code
and when i try to show it in the page the html show up without working
Like this
i am wondering how can i compile the html to look like it supposed to be
This is answered here:
Angular HTML binding
You can use either this:
<div [innerHTML]="current_page.data.details"></div>
or <div innerHTML="{{current_page.data.details}}"></div>
Check the reference: https://angular.io/guide/template-syntax#property-binding-vs-interpolation
Related
I'm developing a web application using Angular 6.
I have a little problem: with this simple code inside in one of my services:
method() {
document.body.insertAdjacentHTML('beforeend', '<h1>Hello</h1>');
}
I can dynamically display html code every time I run.
This happens, however, only because <h1> is a native HTML tag.
How can I do the same thing with an Angular component associated with an HTMML template? For example, <myComponent></myComponent>,
it does not work this way ...
method() {
document.body.insertAdjacentHTML('beforeend','<myComponent>/myComponent>');
}
Can you help me with a solution that uses a few lines of code?
I have to use this method in a service. Thanks.
Trying to render HTML data in kendo Grid column using Vue.js.
Code Snippets are as below:
JSON data-
Template -
Can anybody suggest how to achieve it?
I am able to get the hyperlinks from JSON using props in kendo-grid in vue js.
Please find the below screenshots.
[KendoUI.vue page] https://i.stack.imgur.com/A6eFw.png
[JSON DATA] : https://i.stack.imgur.com/Vd9ww.png
Hi there!
I am in need to create a table with so many records using Angular 2+. For that, I'm trying virtual scroll. Still, I can't find any documentation or samples in a working condition.
Please help me for getting started with Angular 2+ virtual scroll.
You may try ngx-ui-scroll. It provides *uiScroll structural directive that can be directly used in your App component's template. It currently (v0.0.4) doesn't support table-layout, but if you can use div-layout, it may look like
<div class="viewport">
<div *uiScroll="let item of datasource" class="row">
<div class="col1">{{item.data1}}</div>
<div class="col2">{{item.data2}}</div>
<div class="col3">{{item.data3}}</div>
</div>
</div>
Then you need to implement the Datasource object in accordance with documentation or code samples from the demo page.
I strongly recommend ngx-virtual-scroller
It is very robust handling dozens of thousands of complex elements without trouble. I use it in my open source Video Hub App to show a gallery of images & videos (custom elements) allowing the user to change the number of columns. See GitHub for code.
You should have a look at Angular Material VirtualRepeat https://material.angularjs.org/latest/demo/virtualRepeat
The md-virtual-repeat directive provides a md-on-demand attribute which avoids having an array as the data source provider.
[Edit] The Angular Material VirtualRepeat not being available for angular2 yet, I did a few changes on rintoj/angular2-virtual-scroll to get the data from the backend and not from an array.
it's on github here https://github.com/pnocera/ng2-vscroll
So I have a website set up and I wish to dynamically load other .html files into a div. Each .html file contains some content but 1 .html file contains its own angularjs directives.
I was using ng-bind-html along with $scope.content = $sce.trustAsHtml(data); but I have discovered that this prints out the html raw (does not process any angular directives).
I've tried to use the various solutions on stack overflow but none have worked for me.
Website: http://algorithmictrading.azurewebsites.net/
App.js: http://algorithmictrading.azurewebsites.net/js/app.js
Example of .html pages being loaded:
http://algorithmictrading.azurewebsites.net/includes/home.html
http://algorithmictrading.azurewebsites.net/includes/about_us.html
.html page that contains angular directives:
http://algorithmictrading.azurewebsites.net/includes/download.html
As you can see, if you navigate to the website and click on the 'download' tab, the content is loaded but the angular in the drop down menu is not handled. The test button I added should also produce an alert box.
Right now, the code is based off this thread:
call function inside $sce.trustAsHtml() string in Angular js
Thanks!
I found that angular was stripping out the directives from html strings if I didn't pass them through the $sce.trustAsHtml method before passing them into the template:
$sce.trustAsHtml('<a href="/some-link" directive-example>link to add</a>');
This combined with a watch/compile on the element's content you're inserting html into seems to do the trick:
scope.$watch(getStringValue, function() {
$compile(element, null, -9999)(scope);
});
Take a look at this example: http://plnkr.co/edit/VyZmQVnRqfIkdrYgBA1R?p=preview.
Had the same problem this week and the best way I found to make it works was creating a custom directive called "BindComponent".
Change the ng-bind-html directive to a custom directive, and inside the link method you put this:
element.html(markupModel);
$compile(element.contents())(scope);
The markupModel can be a string with html code or you can use $templateCache($templateCache docs) to get the code from a .html file.
I see examples that show directives rendering an HTML file in lieu of the directive. Or controllers rendering an HTML snippet as a scope variable, written directly between single quotation marks - like
$scope.items = '<ol><li>an item></li> <li>another item</li></ol>'
(this does not work well for me because I have other single quotation marks in the middle of my HTML snippet that seem to stop the HTML snippet from rendering properly.)
Here is something I tried that did not work:
Controller code:
innerapp.controller('ResourcesController', function($scope, $sce, $http) {
$scope.template = 'employeelists.html';
});
HTML code:
<div ng-controller="ResourcesController">
<div ng-bind-html-unsafe="template"></div>
</div>
I have 'employeelists.html' in my app/assets/templates folder. I am using AngularJS with Rails, and this setup already lets me call the file like this:
div ng-include="'employeelists.html'"></div>
But I want the controller, instead of ng-include, to render the HTML file.
Basically, I am working on functionality such that if I select an item on the HTML page (under this AngularJS controller), a function in the controller gets called that updates the scope variable (that's linked to a template file) with another template file.
First, please keep in mind DOM manipulation should allways be left to directives, not controllers. Second, I would highly recommend you looked into views using ui-router. This could easily accomplish what you want to do. Here is an example of simple view changing:
https://angular-ui.github.io/ui-router/sample/#/
Also, someone already found a way to input code to the ng-include directive so you could update it:
angular - update directive template on click
However, do read the answer above how he also recommends you use $stateProvider (ui-routers state configurator) since it would be a much easier approach to what you are trying to do.
I hope this helps