Angular Displaying Multiple Buttons for a List

user_13614356 0
Viewed 574

I have a list of cells. And I am trying to display its Location Reference for another screen. The way I want to display that property is in the shape of buttons. I want to have 1 button per cell and on the button, I want to write the Location Reference of the cell. Right now, the cells are too much, so I don't want to add them one by one. I tried to use ng-repeat but I couldn't make it work and it gave many errors. What should I do to achieve what I want?

HTML:

<div fxLayout="column" class="mat-elevation-z2 responsive-grid">
  <table>
    <tr ng-repeat="LocationReference in cell">
      <td>
        <button>{{ cell.LocationReference }}</button>
      </td>
    </tr>
  </table>
</div>

TS:

cell: ICell;

Cell Interface:

export interface ICell {
  CellId?: number;
  CellName?: string;
  LocationReference?: string;
}
angular typescript html javascript
2 Answers

ng-repeat is for angularJS, in the tags you say you are using angular. Angular is different from angularJS, in angular you can use ngfor

If you have a list of cells, you need to loop through your cells, and not over the property of one cell. Also it totally doesn't make sense to put your button in a single cell, so I removed the table construct. Use a table only if you are displaying tabular data.

If you are displaying tabular data, add the table structure back, but now you should see how this is supposed to work: cells is the array for all your cells, should be of type ICell[]

<div fxLayout="column" class="mat-elevation-z2 responsive-grid">
  <button *ngFor=let cell of cells>{{cell.LocationReference}}</button>
</div>
user_47331610

You should use *ngFor and not ng-repeat. ng-repeat is used in AngularJS, and *ngFor is used in Angular. If you will loop through an array you can do it like this:

<div fxLayout="column" class="mat-elevation-z2 responsive-grid">
  <div *ngFor="let item of cell">
    <button>{{ item.LocationReference }}</button>
  </div>
</div>

If you will loop through a dictionary you can do it like this:

<div fxLayout="column" class="mat-elevation-z2 responsive-grid">
  <div *ngFor="let key of cell | keyvalue">
    <button>{{ item.value}}</button>
  </div>
</div>
user_143898300
Related