How to render a for loop in innerHtml Angular 2?

Question

Hi am working on an angular 2 project and i have a material dialog box. Am passing the data to the dialog box from my parent as below:

let infoDialog = this.mdDialog.open(ErrorDialogComponent, {
                        'data': {
                            'type': 'error',
                            'content': `<ng-container *ngFor="let x of data.status.message">
                            <label [innerHtml]="x"></label>
                          </ng-container>`,
                        },
                        'disableClose': true
                    });

and in my dialog I have the placeholder like below

<div mat-dialog-content class="u-margin-top-24" [class.no-margin]="type === 'error'">
    <div class="row">
      <div class="col-12 content">
          <div [innerHtml]="content | translate"></div>
      </div>
    </div>
  </div>

Some how the content is not displaying in the dialog. Any idea whats happening guys?

Read it [How to dynamically add innerHTML with angular 2 components](https://stackoverflow.com/questions/40473910/how-to-dynamically-add-innerhtml-with-angular-2-components) — Chatar Singh, Aug 17 '18 at 09:52

score 0 · Answer 1 · answered Aug 17 '18 at 09:27

Try like this:

instead of content use data.content

<div mat-dialog-content class="u-margin-top-24" [class.no-margin]="type === 'error'">
    <div class="row">
      <div class="col-12 content">
          <div [innerHtml]="data.content | translate"></div>
      </div>
    </div>
  </div>

How to render a for loop in innerHtml Angular 2?

1 Answers1