{"id":33584,"date":"2023-01-05T16:03:19","date_gmt":"2023-01-05T10:33:19","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=33584"},"modified":"2023-01-13T14:16:50","modified_gmt":"2023-01-13T08:46:50","slug":"use-dom-sanitizer-to-bring-into-effect-rich-text-styling-html-pages-angular-designed-dynamics-365-crm","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2023\/01\/use-dom-sanitizer-to-bring-into-effect-rich-text-styling-html-pages-angular-designed-dynamics-365-crm\/","title":{"rendered":"Use DOM Sanitizer to bring into effect Rich Text Styling of HTML pages in Angular designed for Dynamics 365 CRM"},"content":{"rendered":"

Overview<\/strong><\/h2>\n

We recently got a requirement from one of our clients whose company is a support based-company. Whenever the emails are received in their CRM using flow, they convert those emails into cases. They wanted the content of these emails to be visible in a section of their related case record.<\/p>\n

Our project was in Angular and we got the content of the email properly, but all the styling of the content was not applied in the \u2018innerHtml\u2019 of the Html page. This was because in angular, the styling gets removed from the \u2018innerHtml\u2019.<\/p>\n

So, after doing some research, we understood the Dom Sanitizer<\/strong> concept in Angular, and using that we were able to show the CSS (styling) of the content of the email on the Html page.<\/p>\n

Below is the process of how we achieved our requirement by using the Dom Sanitizer<\/strong> of Angular-<\/p>\n

Implementation<\/strong><\/h2>\n

As the content of the email record is in rich-text format and the styling was getting lost, we used Dom-Sanitizer to allow all the styling on our Html page.<\/p>\n

Solution<\/strong><\/h2>\n

For using Dom-Sanitizer in app.component.ts<\/strong>, we have to import its module and add the service module. Below are the imports and the initialization-<\/p>\n

import { Component, OnInit, SecurityContext } from '@angular\/core';\r\nimport { DomSanitizer, SafeHtml } from '@angular\/platform-browser';\r\n\r\nimport { Pipe, PipeTransform } from '@angular\/core';\r\n\r\nimport { Subscription } from 'rxjs';\r\n\r\nimport { AppService } from '.\/app.service';\r\n\r\n@Component({\r\n\r\nselector: 'app-root',\r\n\r\ntemplateUrl: '.\/app.component.html',\r\n\r\nstyleUrls: ['.\/app.component.css']\r\n\r\n})\r\n\r\nexport class AppComponent implements OnInit {\r\n\r\ntitle=\"Dom_Sanitizer\";\r\n\r\nretrieveEmailRecordSub = new Subscription();\r\n\r\n_appService: AppService;\r\n\r\nconstructor(private sanitizer: DomSanitizer, appService: AppService) {\r\n\r\nthis._appService = appService;\r\n\r\n}<\/pre>\n
Logic: –<\/strong><\/p>\n
ngOnInit(): void {\r\n\r\n\/\/calling the function.\r\n\r\nthis.getContentRichTextEditor();\r\n\r\n}\r\n\r\n\r\n\/\/function to sanitize the values and apply the styling of the content\r\n\r\nsafeHTML(str: string) {\r\n\r\n\/\/this will sanitize the content and will apply the styling that was present in it.\r\n\r\nthis._appService._htmlContent = this.sanitizer.bypassSecurityTrustHtml(str);\r\n\r\nconsole.log(\"htmlcontent\" + this._appService._htmlContent);\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n\/\/function to get the content of email record and display in on the html page.\r\n\r\ngetContentRichTextEditor(): any {\r\n\r\ntry {\r\n\r\n\/\/calling the appservice function to get content of rich text editor field \u00a0of email regarding the case record.\r\n\r\nthis._appService.getEmailRecord();\r\n\r\n\/\/getting the response from the emailRecord function in the app.service.ts file to get the rich-text content of the email\r\n\r\nthis.retrieveEmailRecordSub = this._appService.retrieveEmailRecord$.subscribe(\r\n\r\n(response) => {\r\n\r\n\/\/validating if the response is right or not\r\n\r\nif (response != undefined && response.length > 0 && response != null) {\r\n\r\nthis._appService._sanitizeHtml = response; \/\/ updating the value of rich text into the service variable to use further.\r\n\r\n}\r\n\r\n}\r\n\r\n);\r\n\r\n}\r\n\r\ncatch (error: any) {\r\n\r\nconsole.log(\"Error :- \" + error.message);\r\n\r\n}\r\n\r\n}\r\n\r\n}<\/pre>\n
Following is the code of app.component.html: –<\/strong><\/p>\n
<div>\r\n\r\n<button class=\"btnViewContent\" (click)=\"safeHTML(_appService._sanitizeHtml)\">\r\n\r\nViewContent\r\n\r\n<\/button>\r\n\r\n<\/div>\r\n\r\n<div [innerHTML]=\"_appService._htmlContent\">\r\n\r\n<\/div><\/pre>\n
On the Html page, we used the htmlContent<\/strong> variable of type SafeHtml<\/strong> from service to render it inside the innerHtml property in order to display the content on the page. The code of app.service.ts<\/strong> file was as follows-<\/p>\n
export class AppService {\r\n\r\npublic parent: any;\r\n\r\nretrieveEmailRecord$ = new Subject<any>();\r\n\r\n\/\/variable to store the response for sanitizing.\r\n\r\n_sanitizeHtml: string=\"\";\r\n\r\n\/\/vartiable to store the response returned from byPassSecuriyTrustHtml() as SafeHtml so it can be applied in the innerHtml\r\n\r\n_htmlContent: SafeHtml=\"\";\r\n\r\nconstructor() {\r\n\r\n}<\/pre>\n
We created the above functionality to get the content of the email from app.service.ts<\/strong> into a variable so that we could allow the styling and show it on our HTML page.<\/p>\n
However, here, we faced an issue, as we were able to get the content of the email body but it was getting displayed on the page after going through bypassSecurityTrustHtml() <\/strong>function with all the styling not getting applied. So, on close inspection, we realized that the bypassSecurityTrustHtml() <\/strong>returns a value as SafeHtml <\/strong>type and in our case, it was getting stored in a string variable. Hence, as a solution, we created a SafeHtml<\/strong> type variable and used it in InnerHtml<\/strong> property.<\/p>\n
Using the above solution, all the styling got properly applied on the page, and below is the screenshot of the content of the email record on the case entity.<\/p>\n
 \"Rich<\/strong><\/p>\n
Conclusion<\/strong><\/h2>\n
As the content of the email record was in rich-text and Angular restricts the CSS(styling) in the innerHtml, the use of Dom Sanitizer helped the CSS (styling) get allowed in the form of SafeHtml and made rendering inside the innerHtml possible.<\/p>\n
\"\"<\/a><\/p>\n
<\/pre>\n","protected":false},"excerpt":{"rendered":"
Overview We recently got a requirement from one of our clients whose company is a support based-company. Whenever the emails are received in their CRM using flow, they convert those emails into cases. They wanted the content of these emails to be visible in a section of their related case record. Our project was in\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[3,16,18],"tags":[2652,2653],"class_list":["post-33584","post","type-post","status-publish","format-standard","hentry","category-angular","category-dynamics-365","category-dynamics-365-v9-2","tag-angular-designed","tag-rich-text-styling"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/33584","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=33584"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/33584\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=33584"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=33584"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=33584"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}