We Keep Coding

How to render a hyperlink in a component template in Angular 6?

I have an Angular 6 application where a component is used to display a message on the page. Some of the messages contain hyperlinks embedded in them (in HTML markup). However, when the messages are displayed on the page, they are getting displayed in plain text (hyperlinks are not rendered, but the markup is displayed to the user instead).
You can visit Stackblitz # https://stackblitz.com/edit/angular-jj5nms for a sample application that I created to explain the issue.
Expected message display:
Click here.
Actual message display:
Click <a href='http://www.google.com'>here</a>

If you want to render HTML a then you need to bind to the innerHTML property of an element, for example:
<p [innerHTML]=“message | async”></p>
Where message is your observable from the service.
Using handlebars to render message is just rendering plain text, binding to innerHTML and using the async will render your html content

You can use innerHTML
In your component:
linkHtml = "Click <a href='http://www.google.com'>here</a>"
In your template:
<div [innerHTML]="linkHtml"></div>

You can use like that:
in your .ts file :
dummyLinkText: string = "Click <a href='https://www.google.com'>here</a>";
and in your .html file:
<div [innerHTML]="dummyLinkText | translate"></div>

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

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.

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

How to prefix values when templating them with rivets?

I am working with the rivets.js library to template data into my application. I am stuck at a kind of a formatting issue. How do I format values while templating them?
For example I have to template the user's photo location inside the image tag and I am getting the name of the file stored on the server from my DB.
It will be a hashed value but I need to prefix it with /img/uploads/ or something like that and postfix it with maybe .jpeg
I am checking if the value is null or not and this is my code:
<img rv-unless="user.photo" src="img/avatars/sunny-big.png" alt="me" data-toggle="modal" data-target="#myModal">
<img rv-if="user.photo" rv-src="user.photo" alt="me" data-toggle="modal" data-target="#myModal">
<i class="fa fa-camera"></i>
If I do something like rv-src="/img/uploads/user.photo", it wouldn't work for obvious reasons. How to get around this problem?

I think the solution to your problem is using formatters Rivets. They are like filters in AngularJS and support piping.
You can define a formatter as follows:
rivets.formatters.imgPath = function(value){
return '/img/uploads/' + value + '.jpeg'
}
Then you can use it in your markup like:
rv-src="user.photo | imgPath"

Knockout + Ajax Content results in multiple binding error

I have built a web application with multiple pages. Some of them are Knockout-driven.
I am trying to apply some Ajax-optimized page loading and stumble over the following issue.
Say I have the following general page structure
<body>
<div id="content">
</div>
</body>
And the following view, which is using Knockout. I include the call to applyBindings inline for being able to load the right ViewModel for every view.
<section id="editor">
<ul data-bind="foreach: items">
....
</form>
</section>
<script>
ko.applyBindings({items: {}}, $("#editor").el)
</script>
I load the view asynchronously into div#content for example using JQuery.load("editor.html #content")
The first page load works fine, but when navigating away (again using JQuery.load) from this view and coming back again I receive the error:
You cannot apply bindings multiple times to the same element.
I have already tried to apply ko.cleanNode but with no success. What am I missing? The #editor node should be removed from the DOM when other content is shown. So I really do not understand how to clean bindings or reinitialize knockout.
Note: I do not want the old data, I want to initialize the Bindings like on a freshly loaded page

Could you test your $("#editor").el in console? It doesn't work in standard jQuery.
If your $("#editor").el returns undefined, your ko.applyBindings({items: {}}, $("#editor").el) is essentially binding to window.document.body.
You may try
ko.applyBindings({items: {}}, $("#editor").get(0));
...
// call cleanNode before loading new page.
ko.cleanNode($("#editor").get(0));
$("#content").load( "newpage.html" );

if your bindings in "editor" section doesn't change,i suggest you to load(AJAX) only json data from server,and replace(modify) your viewModel in the browser,in that way knockout will refresh the dom automaticly.