Angular: How to implement ng-include like functionality in Angular 5? - javascript

Is there any functionality to render html file dynamically inside a components template based on the path? I have the path to local html file now I need to display the content of it inside a components template. In Anular 1.x we had ng-include, any similar functionality in Angular5?
<div class="row blogdetail-container">
{{blogSelected.description}} // currently interpolates the path
</div>
variable blogSelected.description contains the path to html file and I want to replace its content here.

Okay so the only reasonably straight-forward way I can think of to do this is to use an http request to get the contents of the html file then use that in the [innerHtml] attribute.
private dynamicTemplate: any = "";
http.get(blogSelected.description).map((html:any) => this.dynamicTemplate = sanitizer.sanitize(html));
then use
<div class="row blogdetail-container" [innerHtml]="dynamicTemplate"></div>
NOTE 1: remember to include http as a dependency for this component.
NOTE 2: remember to include sanitizer as a dependency for this component
NOTE 3: remember to validate blogSelected.description before calling the http request to check it's actually a valid URL.

Related

Angular directives inside InnerHTML

I know its not possible to inject angular directive along html code inside inner html, is there any work around it? I'm trying to read the html and the directive from a html file and inject it inside a div, I thought about using component factory and create the component dynamically but the directive in the html file can be anywhere in the code not sure how I can append it to the right place in dom, I don't have much experience working with component factory so please let me know if there is a way.
ngOnInit(): void {
let loading = this.loadingService.addTask();
this.route.paramMap
.take(1)
.subscribe(params => {
let page: string = params.get("page") || "";
if (page) {
this.trainingService.getPageContent(page)
.take(1)
.subscribe(res => {
this.content = res;
this.loadingService.completeTask(loading);
})
}
else {
this.loadingService.completeTask(loading);
}
},
error => {
this.notificationService.error("Error retrieving training page", error);
this.loadingService.clearAllTasks();
})
here is my template
<div [innerHtml]="content"></div>
here is an html page example that should be injected (this is an external html page file)
<div class="row">
<div class="col-md-12">
<div class="panel panel-default b">
<div class="panel-body">
<div class="row">
<!--the directive-->
<sa-azure-media-player [source]="the link"></ss-azure-media-player>
</div>
</div>
</div>
</div>
</div>
There isn't a way to do this. The workaround would be to change the way you inject html. Instead of injecting as html, write a sub-component, give it the right info (as an [json-]object!), and off you go.
In case you do not have control of the incoming info (in your case html), you are forced to mould it into an object, so you can use it in angular.
In a recent project I had to have text content that might contain iframes (iframes don't work well in angular). The solution was to parse and save the content in the backend as a JSON-object containing text- and iframe-parts in the right order (that cost some time, unfortunately). Once I got hold of it in Angular, I could inject the texts and iframes of the JSON-object by using typescript. And, of course, do the right thing for the right element.
So, in case you have control over the incoming info (be it html or whatever kind of identifiable object), that's where you should change the procedure (and make full use of the angular MVC-stuff). In case you do not have control over that, please provide some more details as to what needs to be done and what the cicumstances are.

how to Merge the .html file into one Master file with all scope values from releated html files in Angularjs

hi all i using angular js i have three html file like.Header,Menu and Footer.html i combined and show ecah html file in each div through id Now the three html file into one html file name is called Master.html
Code used for link html
<script>
$(function () {
$("#navbar-container").load("header.html");
$("#sidebar").load("slidebar.html" );
$("#footer").load("footer.html");
});
</script>
Header.html
i have a one scope variable in header page and it's shows correctly scope variable like say hello world.but when i combined into that means i merge into master page it's not working that scope values are not fetched i don't why anyone help to solve this problem
Please show how did You initialize the "scope variable" in header?
I think what You want to use here is the ngInclude directive which includes additional html code into current template.
So You'r example might look like:
<div ng-include="header.html"></div>;
....

Where to declare long ng-style attributes Angularjs

Say I have the following snippet in an Angular project:
<div ng-app="ExampleApp" ng-controller="ExampleController as controller" ng-init="">
<div ng-style="styleRules={'background-color':'blue', 'width':'100px', 'height':'100px'}"></div>
</div>
If "styleRules" contains a dozen or more CSS rules, should I still keep the entire JSON object in-line, or should it be moved to another file? If it should be moved, to where should I move it?
If it's primarily static as the example you provided, I'd recommend moving it to a $scope.styleRules variable in your script and referencing it in ng-style="styleRules".
Update
Actually if it's static, just put the rules in the style attribute. While not required, you only need to include the dynamic rules in ng-style.

Render html tag from string

I have some values as amount like 1000, 2000, <b>3000</b>, <4000>, <b>5000</b> inside JSON as an API response. I want to render this response inside a table. So I tried ng-bind-html. BUT it is showing only the value which are having tags like 3000,5000. I want to show all values , 1000,2000,4000 as a plain string and 3000,5000 in BOLD/or any other HTML tag.
angular.forEach($scope.arr2.test,function(item)
$scope.res=$sce.trustAsHtml(item.amount);
return $scope.res;
});
On HTML side, I have something like this
<td id="price" class="edit" ng-repeat="pro in d.procedure" ng-bind-html="valueCheck(d._id,pro._id,hos._id)"></td>
You can use ng-bind-html and ng-bind-html-unsafe for this. But please be mindful of the security concerns here.
You can find more details here
Do make sure you sanitize your strings, to prevent security vulnerabilities
First of all you need to download the ng-sanitize js
https://docs.angularjs.org/api/ngSanitize
and then inject ng-sanitize to angular module.
then you can use ng-bind-html and ng-bind-html-unsafe
you can use ng-sanitize module for the same - see here
var app = angular.module("myApp", ['ngSanitize']);

What is the way to encode json template to html with angularJS?

I'm a beginner in AngularJS and I try to render a json in html with angularJS but html tags are not encoded. Is there a way to do that with an angularJS method ?
My HTML:
<p>{{template.title}}</p>
My JSON:
{
"title":"try a <br> to break line"
}
My JS:
$http.get(JSON).success(function (data) {
$scope.template = data;
});
Unfortunately, the render display the br tag
Angular wants to bind text as text by default.
In Angular <1.2.0 you need to bind the html unsafe (this can be dangerous):
<h1 ng-bind-html-unsafe="title"></h1>
In Angular 1.2.0 you need to bind the html:
<h1 ng-bind-html="title"></h1>
Dont forget to include ngSanitize to keep your server safe.
Overall, I recommend using Angular 1.2.0 rc2 or later versions as the ngSanitize will keep you safe.

Categories