Adding an array of strings and HTMLDivElements using *ngFor to DOM

Question

I have a requirement for layout something like this

I want to use CSS display: grid;

someFunction(data) {
        this.data = data;
        let parentDiv1 = document.createElement('div');
        parentDiv1.className = 'div';
        parentDiv1.textContent = 'Random Inner Text';
        let cb1 = document.createElement('input');
        cb1.type = 'checkbox';
        cb1.className = 'check-box';
        parentDiv1.appendChild(cb1);
        this.tableKey = [
            '',
            `Text: ${this.data.someRandomText1}`,
            `Text: ${this.data.someRandomText2}`,
            `Text: ${this.data.someRandomText3}`,
            `Text: ${this.data.someRandomText4}`,
            `Text: ${this.data.someRandomText5}`,
            parentDiv1,
            `Text: ${this.data.someRandomText6}`,
            `Text: ${this.data.someRandomText7}`,
            `Text: ${this.data.someRandomText8}`,
            parentDiv1
        ];
    }

<div class="container">
    <div class="table">
        <ng-container *ngFor="let item of tableKey" [innerHTML]="item"></ng-container>
    </div>
</div>

This is what the output is (Ignore CSS).

Now instead of [object HTMLDivElement] I want a checkbox and text there. Is there a way?

You need to update your data set and implement that. for example your tableKey will be array of object. — Palash Kanti Bachar
– Palash Kanti Bachar, Commented Mar 6, 2021 at 12:22
you can see this. I have changed your data type and implement if else logic stackblitz.com/edit/… — Palash Kanti Bachar
– Palash Kanti Bachar, Commented Mar 6, 2021 at 12:32
Yes, this is a solution but I am looking for a way to pass an array of strings | HTMLElement from .component.ts to .component.html — Naman Jain
– Naman Jain, Commented Mar 6, 2021 at 14:01

David · Accepted Answer · 2021-03-06 17:41:10Z

Method #1

You could use the outerHTML property of the html element so that your array only contains string, and then sanitize these strings in the template so that the html can be displayed

component.ts

this.tableKey = ["text1", "text2", 
  parentDiv1.outerHTML, //Convert html element to string

component.html

<div *ngFor="let item of tableKey" [innerHTML]="item | safeHtml ">

Method #2

Only use one array of mixed strings/HtmlElements like in your example, and in the template decide how to display it based on the type

component.ts

this.tableKey = ["text1", "text2", 
  parentDiv1, //array of mixed elements

// ...
public isString(value: any)
{
  return typeof(value) ==='string';
}

component.html

<ng-container *ngFor="let item of tableKey" >

  <div *ngIf="isString(item)" [innerHTML]="item"></div> <!-- display string -->
  <div *ngIf="!isString(item)" [innerHTML]="item.outerHTML | safeHtml" ></div> <!-- display html element -->

</ng-container>

See stackblitz demo

Nibha · Accepted Answer · 2021-03-07 13:13:29Z

0

+50

The best approach to this solution would be using outerHTML property of the created element. And then sanitize it in the HTML component using a pipe.

// .component.ts

export class AppComponent implements OnInit {
  name = "Angular " + VERSION.major;
  tableKey: any[];

  ngOnInit() {
    let parentDiv1 = document.createElement("div");
    parentDiv1.className = "div";
    parentDiv1.textContent = "Random Inner Text";
    let cb1 = document.createElement("input");
    cb1.type = "checkbox";
    cb1.className = "check-box";
    parentDiv1.appendChild(cb1);
    this.tableKey = [
      "Random 1",
      "Random 2",
      "Random 3",
      "Random 4",
      "Random 5",
      "Random 6",
      parentDiv1.outerHTML,
      "Random 7",
      "Random 8"
    ];
  }
}

// .pipe.ts

import {
  Pipe,
  PipeTransform
} from "@angular/core";
import {
  DomSanitizer
} from "@angular/platform-browser";

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

<div class="container">
  <div *ngFor="let item of tableKey" [innerHTML]="item | safeHTML">
  </div>
</div>

DEMO

answered Mar 7, 2021 at 13:13

Nibha

2711 silver badge7 bronze badges

5 Comments

David Over a year ago

So basically you just copied my answer?

Nibha Over a year ago

Not exactly. I mean there are similarities but this is a very common solution.

David Over a year ago

How is it different from the stackblitz I posted 24 hours ago? This is exactly the same code

Nibha Over a year ago

The code is similar to what @naman posted and I made changes in that code.

David Over a year ago

The only change being to add the missing pipe (which I already did) and add parentDiv1.outerHTML , which I already did. Have a good day

Collectives™ on Stack Overflow

Adding an array of strings and HTMLDivElements using *ngFor to DOM

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related