Equivalent of ng-bind-html in Angular 2?

[Vern Jensen]

I have Angular 1 code I'm porting to Angular 2 that uses ng-bing-html, in combination with $sce.trustAsHtml(), to inject HTML into a page.

In addition, my Angular 1 code has a custom Directive that compiles the HTML, so that I can use Angular directives within the HTML that I am injecting.

What is the equivalent for all of this in Angular 2?

-Vern

[Eric Martinez]

Vern,

if I'm not wrong you can use 

<directive [inner-html]="yourExprContent"></directive>

I remember seeing it once in the group, so I'm not entire sure.

[Vern Jensen]

Update: I found this, which shows to use [inner-html]. This works for simple HTML, but doesn't work to inject custom Angular directives I'm created and included like so:

@View({

        templateUrl: '/pages/study.html',

        directives: [Multiselect]

})

I'm sure there's something special I need to do to allow injected HTML to use custom directives, I just have no idea what. (Some sort of equivalent of $compile in old Angular, perhaps?) My old Angular 1.x code used this to compile injected HTML elements that use Angular:

    angular.module('qms')

        .directive('bindHtmlCompile', ['$compile', function ($compile) {

 return {

restrict: 'A',

link: function (scope, element, attrs) {

 scope.$watch(function () {

return scope.$eval(attrs.bindHtmlCompile);

 }, function (value) {

// Incase value is a TrustedValueHolderType, sometimes it

// needs to be explicitly called into a string in order to

// get the HTML string.

element.html(value && value.toString());

// If scope is provided use it, otherwise use parent scope

var compileScope = scope;

if (attrs.bindHtmlScope) {

 compileScope = scope.$eval(attrs.bindHtmlScope);

}

$compile(element.contents())(compileScope);

 });

}

 };

}]);

[Eric Martinez]

Vern,

I think, and I'm not entirely sure about this, you are looking for DynamicComponentLoader

[Vern Jensen]

Thanks again for the replies, Eric.

I'm not sure that DynamicComponentLoader is what I'm looking for. I found this Angular 2 / Bootstrap Modal Dialogs project, which has some code that uses DynamicComponentLoader.

But looking at that code, it seems to inject existing HTML elements, not convert strings of HTML text (such as "<mycustom></mycustom>") into working HTML. If I'm wrong let me know... Could be that I'm mis-understanding the source code.

Another related question: when defining a @View annotation, such as:

    @View({

        template: <div><multiselect></multiselect></div>',

    })

would it be possible to change, at run-time, the HTML in the "template" portion? If so then maybe that could be part of the solution to my problem. That possibly combined with compileInHost. I don't really know what compileInHost does, but it seems like it might be the ticket. I'm currently googling code that uses it... but it seems to compile existing classes that have a predefined template... which is useless to me unless I can change the HTML in the template before compiling.

-Vern

[Eric Martinez]

So basically you want something dynamic at runtime. I don't think it is possible and it won't be.

Another user asked a time ago for an equivalent of ng-include in ng2, see my answer and the links I posted (I'm too lazy to do it again :P)

https://groups.google.com/forum/#!topic/angular/ROkKDHboWoA

And for what I understand compileInHost it is not your ticket :( (see under createRootHostView)

[Vern Jensen]

>>So basically you want something dynamic at runtime. I don't think it is possible and it won't be.<<

Okay good to know! It's possible that I can still do what I want with some tricky combinations of *ng-for, ng-if, and similar.

[Eric Martinez]

If I understood what you are trying to do, probably it would be possible. But you would need to have as many templates as you need pre-compiled in some hidden component or so, and then inside of any ng-if use compileInHost. To be really honest I haven't tried something like this, so you would have to give it a shot. If you make it and it works it would be really nice from you to share it. So I will be waiting for your solution!

[Eric Martinez]

I know this was answered, but I've seen some hacky ways of doing this, so maybe you wanted to know about them

Start reading from here : https://gitter.im/angular/angular?at=55e8654717b2081605a58e1a and see @alexpod's answer (his plnkr has a very hacky way to do it), and in the same issue where @mhevery said that they won't going to add a ng-include a couple of users posted their solutions https://github.com/angular/angular/issues/2753