I need to insert HTML5 code inside my component.ts, I'm trying to reflect that code in my component.html, how can I insert it including the CSS and the Angular's directives? I have to do it like that because the web site needs to change depending on the current hour.
I'm using angular 8. Thanks
I've used in the component.html the function [innerHtml]="htmlToAdd" inside a div label, and in the component.ts have created a var type any called "htmlToAdd" in which one I put all the HTML code, it worked but it doesn't detect the Angular's directives, and just a few styles of the CSS. I have CSS styles in the own component folder and in the folder styles.css, but the browser only detects some of the styles in the styles.css folder. The trigger doesn't work neither.
htmlToAdd : any;
this.htmlToAdd = '<p><button class="btn-sec app-btn-years" (click)="toggleDetails2019()" (click)="toggle2019()"><div *ngIf="text2019;then yearClose else yearDetails"></div><div [#showMonths]="status2019"></div>'+
'</button></p>';
I expect each time the browser is refreshed the web site show the code inserted in the component.ts with the CSS, the trigger and the angular's directives working, not only the html structure as it does right now.
Related
In Vue, there's this feature where you can render a registered component directly to an HTML or Laravel Blade file using Vue.component()
instead of mounting them to a parent component/element first. I wonder if such way is also possible with React, because I'm currently building a Laravel-React side project. You might suggest just create a root JS file and render the component with ReactDOM.render(), but that would be a hassle and it would flood the folder if I want to render multiple small components.
In your view blade just add div like below
<div id="react-component-id" ></div>
and create component and render you html as below:
if (document.getElementById('react-component-id')) {
ReactDOM.render(
<yourCreatedCompoennt />,
document.getElementById('react-component-id')
);
}
So it will not affect root level.
I display an SVG file using HTML img tag through the .html file of an Angular 6 component. Let's call this SVG file a.svg.
This a.svg image contains parts that are linked to other SVG files, and let's just consider the first of them, named b.svg.
All the SVG files are static. They are place in a subfolder of assets in Angular 6 application folder.
When I open a.svg directly under my Internet browser, I can click on hyperlinked parts and navigate to b.svg, without any problem.
Under Angular 6, file a.svg is displayed correctly, but apparently, I can not click on interactive parts.
I investigate the issue without being able to find a real clue about the root cause of such behabior. Maybe, related to security issue. I wonder
is this a desired behavior of Angular 6?
is there a way to tell Angular 6, to allow user interaction on these images ?
Finally found the right way to do so.
First, read security guide for angular which provides many good hints, although far from being exhaustive.
To make my code run smoothly, this is what I changed
Firstly, in angular component .html file, I changed the HTML img tag into a div tag, on which I used the [innerHTML] binding to an internal property named svgFromFile
<div class='e2e-inner-html-bound' [innerHTML]='svgFromFile'></div>
Then, in angular component .ts file, I changed the implementation to use bypassSecurityTrustHtml() on the content of the target SVG file
this.fn = '/assets/urba/diagram/' + params['fn'] + '.svg'; // from route parameter to image asset to be served
this.http.get(this.fn, {
responseType: 'text'
}).subscribe(
data => {
console.log(data);
this.svgFromFile = this.sanitizer.bypassSecurityTrustHtml(data);
},
error => console.log('svgFromFile', error)
);
Doing so, embedded URLS in SVG file are now active and dereferenceable.
So I have a curious situation and I don't think it's going to work, but I figured I'd ask in case it is and someone knows how to. I am using a 3rd party website to create marketing funnels. You can add your own custom html and javascript, but it parses out the html in a rather unfavorable manor. Basically you specify an element on the page and it appends it as a data attribute and dynamically loads it into the DOM. Since this is happening this way, my app isn't being initialized because it's not in the DOM on page load. Is there a way to make this work? I'll explain a little deeper my configuration.
I add custom html such as:
<div data-ng-app="AppName"><div data-ng-controller="ControllerName"><div>perform controller logic here</div></div>
As you can see, this needs to be in the DOM for the app to initialize and, well work. Is there a way to initialize the app after the page has loaded dynamically? I can add my own JS files in the custom html field, but thats about as far as I can go for customization. Any help is appreciated!
Maybe you should execute angular's bootstrap function manually in your script after the required dom loaded.
var app = angular.module('appName', []);
app.controller([...]);
angular.bootstrap(document.getElementById('divId'), ['appName']);
For more information, you can see this doc https://docs.angularjs.org/api/ng/function/angular.bootstrap
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