CODEWITHSUNDEEP
javascripthtmlangular
DeadlyDagger
DeadlyDagger

Reputation: 129

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>

Upvotes: 1

Views: 3561

Answers (1)

Klaassiek
Klaassiek

Reputation: 2906

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.

Upvotes: 2

Related Questions