0

My angular5 project receives a full set of HTML content from the API side and I am displaying it as it is.Now, After it loads, I need to select some div elements where on its onClick it will apply selection box around that specific div.I am not able to inject the click event from the typescript file.Can anyone help with this? Below is the code I used to render the HTML to view. Thanks in advance.

       import {Component, OnInit, Pipe, PipeTransform, ElementRef, Renderer2} 
        from '@angular/core';
        import {SurveyFormPreviewService} from './survey-form-preview.service';
        import {DomSanitizer} from '@angular/platform-browser';

       @Pipe({name: 'safeHtml'})
        export class SafeHtmlPipe implements PipeTransform {
            constructor(private sanitized: DomSanitizer) {}
           transform(value) {
                console.log(this.sanitized.bypassSecurityTrustHtml(value))
                return this.sanitized.bypassSecurityTrustHtml(value);
           }
       }

    @Component({
        selector: 'app-survey-form-preview',
        template: '<div [innerHTML]="htmlString | safeHtml"></div>',
        styleUrls: ['./survey-form-preview.component.css']
    })
export class SurveyFormPreviewComponent implements OnInit {
    htmlString: SafeHtmlPipe;

    constructor(private surveyFormPreview: SurveyFormPreviewService, private elementRef: ElementRef,
        private renderer: Renderer2, private elRef: ElementRef
    ) {
        this.getSurveyFormPreview(1);
    }

    getSurveyFormPreview(surveyId: number): void {
        surveyId = 5;
        this.surveyFormPreview.getPreview(surveyId)
            .subscribe(
            resp => {
                this.htmlString = resp["html"];

            },
            error => console.log(error));
    }
Midhun Krishna
  • 21
  • 1
  • 7
  • You can use `ReadyState` to know when all the data has loaded and then you can use `jquery`to click on that `DIV`. – hiren Mar 10 '18 at 12:28
  • Please show some code. Does your API have to return HTML? Usually when using Angular you want your webservice to return JSON data and display HTML client-side. – Jeto Mar 10 '18 at 12:29
  • possible duplicate of this [question](https://stackoverflow.com/questions/42692780/how-to-add-click-event-to-dynamically-added-html-element-in-typescript) – Fateme Fazli Mar 10 '18 at 12:30
  • @Jeto yes, I get a full set of HTML code as JSON data.I need to render a page from it and inject some functionalities to it. – Midhun Krishna Mar 12 '18 at 07:02
  • @fatemefazli actually I have tried it with query selector 'this .elRef.nativeElement' returns the HTML content but using query selector it shows null. I have used the 'class' to identify the div. – Midhun Krishna Mar 12 '18 at 07:07
  • I think the problem is I am receiving full HTML content so when I assign inner HTML to the div, the content will start with the tag again inside that div, That's why I am not able no select the div inside the HTML content.Still, I don't have any solution to how I do it. – Midhun Krishna Mar 12 '18 at 10:07

0 Answers0