We Keep Coding

Angular [innerHTML] doesn't work properly [duplicate]

This question already has answers here:
Angular 2 innerHTML (click) binding
(7 answers)
Closed 4 years ago.
I'm trying to bind html content to a div in my Angular 6 app but it doesn't work.
Here is the content:
let content = 'Hello <a routerLink="['/Soja']">Nick Soja</a> How are you ?'
Here is the html part:
<div class="content" [innerHTML]="content"></div>
Now only Hello is binded. I don't see the rest of the html content. The expected result is:
'Hello Nick Soja How are you ?'
What's wrong ?

You can't use angular directives inside the innerHTML input value, it expects valid HTML. So that HTML is stripped from the code.
The HTML string being converted to HTML by the innerHTML directive won't be compiled. So that also means you can't use things like databindings inside the HTML string.

Try to remove the routerLink directive. I believe it doesn't work because [innerHTML] cannot compile angular directives and components, only static HTML.

just use: tick (``) instead of single quotes ''
content = Hello <a routerLink="['/Soja']">Nick Soja</a> How are you ?;
or try this:
define your link in .ts file
link = '/Soja'
and bind it to router link in your template file
<div class="content" >
Hello <a routerLink="link">Nick Soja</a> How are you ?
</div>

How to show json response as code not as a string in Angularjs? [duplicate]

This question already has answers here:
Insert HTML into view from AngularJS controller
(17 answers)
Closed 6 years ago.
I get my article from database as json object. in this json I have my article data like title and body. I can show it in html page by {{title}} but my problem is about body. body contain HTML codes but the angular show it as string between 2 quotation. How can I solve it?
Angular controller code:
myApp.controller("articlePageController" , function($scope , $http ,$location , $routeParams){
$http.get("/getArticle")
.success(function(data) {
$scope.body = data["article"]["body"];
$scope.title = data["article"]["title"];
})
.error(function(data){
console.log("no");
$scope.currentArticle = data;
});
});
Html view:
<h2>{{title}}</h2>
<p>{{body}}</p>
result:
<p><iframe src="https://www.youtube.com/embed/9aOuF0-1KKY" width="560" height="315" frameborder="0" allowfullscreen=""></iframe></p>
the html code in result does not work as html code
result image:
enter image description here
enter image description here

Use ngBindHtml
<p ng-bind-html="body"></p>

You need to use ng-bind-html to display html contents.
https://docs.angularjs.org/api/ng/directive/ngBindHtml

angular how to let html redner the scope variable as a string

Say I have the following line in a controller hmmCtrl:
$rootScope.value = 1;
$scope.hmm = "{{$root.value}}"
And in html, if I have:
<section ng-controller="hmmCtrl">
{{hmm}}
</section>
Currently it displays:
{{$root.value}}
but I actually want to see the value of $root.value:
1
In the long run I plan to put the $root.value in a json file that is going to be parsed by the hmmCtrl.
How can I make this happen?

So what you can do is, you can write a inside a controller which can return your interpolation expression evaluated value
Code
//inject `$interpolate` inside controller function before using it.
$scope.evaluateValue = function(expr){
return $interpolate(expr)($scope);
}
Markup
<section ng-controller="hmmCtrl">
{{evaluateValue(hmm)}}
</section>
Other way
<section ng-controller="hmmCtrl" ng-bind="evaluateValue(hmm)">
</section>
Demo Here

Change your html-Code from
<section ng-controller="hmmCtrl">
{{hmm}}
</section>
to
<section ng-controller="hmmCtrl">
{{value}}
</section>
$scope inherites from $rootScope, meaning $scope also has the "value"-variable...

Passing Html DOM inside an element as an string to AngularJS controller

I wanted to grab the Html DOM inside an element as an string to angular controller. I didn't find good resource online. I have following Html Code:
<div class="form-group ng-controller="straightRunningBeltsCtrl"">
<button class="btn btn-success btn-lg" ng-click="post()">Get Service Factor</button>
<div id="pop-up"><h1>My content here!!</h1></div>
</div>
And I have following JS code
angular.module('straightRunningBelts', [ ])
.controller('straightRunningBeltsCtrl', straightRunningBeltsCtrl)
function straightRunningBeltsCtrl($stateParams, $scope, $http, $sce){
$scope.post= function () {
var template=$sce.trustAsHtml(angular.element(document.getElementById('pop-up')));//Results an error( $sce.trustAsHtml needs string input)
}
Variable template needs to get value from DOM. Right now, angular.element(document.getElementById('pop-up') returns object. I wanted to do sometime like JQuery Does by using html() function here. Any help or reference to it is welcomed.

To retrieve the HTML inside your DOM element, you can use innerHTML. In your case it would be
document.getElementById('pop-up').innerHTML
Working Plunkr

AngularJs ng-src in Iframe [duplicate]

This question already has an answer here:
Unable to load url into iframe via AngularJS controller
(1 answer)
Closed 8 years ago.
I am attempting to set the ng-src of an iframe using a scope variable and it keeps coming through as blank.
I tried this:
<div ng-repeat="url in urls">
<div ng-click="testAlert(url.domain)">
<iframe ng-src="{{ url.domain }}" ></iframe>
<div style="text-align: center">{[ url.domain ]}</div>
</div>
</div>
The text shows up just fine, so I know the values are there as well as the click alerts the select domain. It is just the ng-src seems to end up blank and therefore doesn't pull up the site. If I hard code the ng-src to an external site it works.

Most likely has to do with $sce not being configured to trust the external resource when interpolated... Try putting this in your controller (be sure to inject $sce service). trustAsResourceUrl is the method you will be interested in and you would pass the URL you want to use to that:
.controller("MainController", function ($scope, $sce) {
var urls = [];
//Need to trust resource to be able to interpolate, see $sce documentation
urls.push({domain: $sce.trustAsResourceUrl("http://angularjs.org")});
urls.push({domain: $sce.trustAsResourceUrl("http://www.jquery.com")});
$scope.urls = urls;
$scope.testAlert = function (value) {
alert(value);
}
});
See working fiddle.