Search code examples
htmlangulartypescriptangular6dynamic-html

html tag attributes not working when rendering html through string in angular 6

I am storing the HTML in a string and using it in the HTML file, I have used the HTML sanitize pipe.

below is my string

  privacyNotice = "<div style=\"color: #ff0000;font-style: italic;\">Before continuing to the  Application, you are required to read and acknowledge this Privacy Notice</div>......<div><input type=\"checkbox\" (change)=\"changeAcknowledgeBtnState()\"/><span class=\"pl-5\">I acknowledge terms of the privacy notice</span> </div> <div>   <button class=\"ackBtn\" [disabled]=\"disableButton\" (click)=\"changePrivacyNoticeStatus()\">Acknowledge </button> </div>";

below is the html file code

<div class="container" [innerHTML]='privacyNotice | safeHtml'>

I have used the safeHtml pipe by referring this example

Output Image

the disabled attribute to the button is not working and also changePrivacyNoticeStatus() is also not getting called

Solution

  • The safeHtml pipe only parses HTML, it is impossible to parse Angular code such as [disabled]="angularCode()" or (click)="changePrivacyNoticeStatus()". The [] and () syntax is part of Angular's data binding syntax that is compiled into Javascript when you are building your Angular project. Your string is provided at runtime and is expected to be pure and ready to go HTML: It can't be resolved from Angular code to Javascript at runtime anymore.

    The fact that you are using dynamic content in the form of a string is considered a code smell in Angular, see if you can't solve this problem by writing a component for it and by providing Inputs to the component, rather than generating HTML code strings.

    Another option could be content projection:

    <app-privacy-notice>
  <button class="ackBtn" [disabled]="disableButton" (click)="changePrivacyNoticeStatus()">
    Acknowledge
  </button>
  <input type="checkbox" (change)="changeAcknowledgeBtnState()"/>
</app-privacy-notice>

    privacy-notice.component.html:

    <div style="color: #ff0000;font-style: italic;">
  Before continuing to the  Application, you are required to read and 
  acknowledge this Privacy Notice
</div>
<div>
  <ng-content select="input"></ng-content>
  <span class="pl-5">I acknowledge terms of the privacy notice</span>
</div>
<div>
  <ng-content select="button"></ng-content>
</div>