inner-html directives

Question

How can I use [router-link] in [inner-html]

Here is the example :

    import {Component, View} from 'angular2/angular2';
    import {RouterLink, ROUTER_DIRECTIVES} from 'angular2/router';

    @Component({
        selector: 'index'
    })
    @View({
        template: `
            <div> Index Content </div>
            <div [inner-html]="test"></div>
        `,
        directives: [ROUTER_DIRECTIVES]
    })

    export class Index {
        private test: String;

        constructor() {
            this.test = `<a [router-link]="['/aRoute', 'AComponent']">Test</a>`;
        }
    }

Here is the solution for Angular1 http://plnkr.co/edit/F91xvGHBASvqCGBJcEYY?p=preview

How can I do it in Angular2 ?

I don't think the compiler would be aware of that routerLink. Why don't you just pass directly the routerLink in your template? — Eric Martinez, Dec 25 '15 at 13:34
i need to get html via ajax and i dont want any page loading by setting href attr to a tags. Is there any way to manipulate the template after the component initialized, --sorry-for-my-english :) — Ali Şahin Özçelik, Dec 25 '15 at 15:04
You can use `templateUrl` instead of `template` to get a dynamic angular page loaded into the app — Poul Kruijt, Dec 26 '15 at 12:23

score 2 · Answer 1 · edited May 23 '17 at 12:17

I've found the solution.

DynamicComponentLoader.loadAsRoot solves that issue.

Here is the API: https://angular.io/docs/ts/latest/api/core/DynamicComponentLoader-class.html

There is an article also: https://medium.com/tixdo-labs/angular-2-dynamic-component-loader-752c3235bf9#.qkxk36s98

Edit: DynamicComponentLoader is deprecated, here is another solution: https://stackoverflow.com/a/37044960/5022904

inner-html directives

1 Answers1