how can we print html string in html file in angular 5?

Question

I have created a array in TS file like:

import {Component, OnInit} from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser'; 
    @Component({
      selector: 'app-foo',
      template: 'app-foo.html',
      styleUrls: ['./foo.component.scss']
    })

    export class FooComponent implements OnInit {
      pArray:any;
      permissionArray:any;
      constructor(private sanitizer: DomSanitizer,) {
      }
   this.pArray=['one','two','three'];
   let strHtml = '';
   for(let objkeys in pArray){
   strHtml  +=  '<tr><td colspan="5" style="text-align: center;"><input type="checkbox">'+objkeys+';</td></tr>';
    } 
  this.permissionArray = 
  this.sanitizer.bypassSecurityTrustHtml(strHtml);

How can we print html string in html page?

You're doing it all wrong. The template should contain the HTML, and use *ngFor. The TypeScript should just expose an array of data to the template. — JB Nizet, Jun 27 '18 at 11:28
Calling a string _Array_ with `any` type is a bit smelly, apart from all the other antipatterns you are using — baao, Jun 27 '18 at 11:29

score 1 · Accepted Answer · answered Jun 27 '18 at 11:30

1

If you want to show HTML code inside an HTML element, you can do something like:

<table [innerHTML]="permissionArray"></table>

Also when you use an expression, you don't have to add this, so it is permissionArray not this.permissionArray in your HTML file.

answered Jun 27 '18 at 11:30

Al-Mothafar

7,949
7
68
102

Whoever comes here and sees this answer, don't use that, it's the worst possible way to do this – baao Jun 27 '18 at 11:53
@bambam well, my answer for what the question for (before the edit)! "showing HTML string", not talking about "best practice" anyway. – Al-Mothafar Jun 27 '18 at 12:21
1

Answers should communicate best practices, not something "that woks" but is highly discouraged. Sorry for the comment above, but future visitors should be warned that this is not the way to go. ... And yeah, it's a shame that OP has edited their question now to something entirely different... – baao Jun 27 '18 at 12:30
@bambam totally agree with you, but as I told you it was answered before the last edit, the question was showing a string need to be rendered, so my answer was specific for that, the question itself was not really clear about what he was trying to do. – Al-Mothafar Jun 27 '18 at 18:17

how can we print html string in html file in angular 5?

1 Answers1