Getting data passed to a mat-dialog using *ngFor

Question

I'm trying to display data passed to a dialog component using *ngFor. I'm passing data like this

const columnNames=['firstName', 'lastName','userName'];
    this.dialog.open(DatatableAdvancedSearchComponent,{
          width: '250px',
          data: {columnNames:columnNames}
    });

and I'm trying to access them in the dialog component using 1.view page

<div class="row">
 <select class="form-control">
 <option *ngFor="let column in columns" value="{{column}}">{{column}}</option>
 </select>
{{data.columnNames}}
{{columns}}
</div>

2.ts page

 columns=[];
  constructor(@Inject(MAT_DIALOG_DATA) public data: any) {
    
    this.columns=this.data.columnNames;
   }

I get the output for

{{data.columnNames}}
{{columns}}

but not for the select statement. select is not filling with options. the same columns get populated below as you can see, but why not in the select statement. any suggestions please.

can you create a stackblitz, it would be easy to check and play around with code. — Abhinav Kumar, Mar 12 '21 at 07:43

score 0 · Accepted Answer · answered Mar 12 '21 at 07:51

0

It should be 'of' instead of in, when you are iterating with values of a collection.

<select class="form-control">
 <option *ngFor="let column of columns" value="{{column}}">{{column}}</option>
 </select>

You can read more about ngFor in details here

answered Mar 12 '21 at 07:51

Abhinav Kumar

2,883
1
17
30

score 0 · Answer 2 · answered Mar 12 '21 at 07:58

0

Your *ngFor Statement Is Incorrect Because You Are Using Keyword "in" Instead Of "of"

Use This =>

*ngFor="let column of columns"

answered Mar 12 '21 at 07:58

eitzaz shah

104
4

Getting data passed to a mat-dialog using *ngFor

2 Answers2