display array data in angular

Question

i'm trying to learn angular after a long time with react and i want to display data from an array.

I want to use a dropdown menu to select the id and to display the address of the selcted id.

The select code should look like this i guess

<select name="customer" >
  <option *ngFor='let customer of customers'>
    {{ customer.id }}
  </option>
</select>

Here is a array example

export interface Customer {
  id: number,
  companyName: string,
  firstName: string,
  lastName: string,
  street: string,
  streetNumber: number,
  zipCode: number,
  city: string,
  country: string,
}

export const customers = [
  {
    id: 800001,
    companyName: 'example company 1',
    firstName: 'John',
    lastName: 'Doe',
    street: 'Example Street',
    streetNumber: 7,
    zipCode: 11111,
    city: 'example city',
    country: 'example country'
  }
  {
    id: 800002,
    companyName: 'example company 2',
    firstName: 'Jessica',
    lastName: 'Doe',
    street: 'Example Street',
    streetNumber: 8,
    zipCode: 11111,
    city: 'example city',
    country: 'example country'
  }
  {
    id: 800003,
    companyName: 'example company 3',
    firstName: 'Mark',
    lastName: 'Doe',
    street: 'Example Street',
    streetNumber: 69,
    zipCode: 11111,
    city: 'example city',
    country: 'example country'
  }
]

I think you forget to mention the question/problem faced in the post. — Yong Shun
– Yong Shun, Commented Mar 26, 2022 at 10:30

Eliseo · Accepted Answer · 2022-03-26 10:43:12Z

1

In angular, to use variables in .ts in the .html we use, see the docs:

Interpolation, e.g.
```
{{variable}}
```
Binding syntax,e.g.
```
<input [value]="variable">
```
Two way binding,e.g.
```
<input [(ngModel)]="variable">
```

Built-in-directives (*ngFor, *ngIf...),e.g.

<div *ngFor="let item of [0,1,2,3]>{{item}}</div>

Others object like Reactive Forms
...

I can say the response to your question

<select [(ngModel)]="customer" >
  <option *ngFor='let item of customers' [ngValue]="item">
    {{ customer.id }}
  </option>
</select>
{{customer|json}}

But I recommended, make a tour of heroes to learn how Angular works (You can skip the animations parts -for me the more complex-)

answered Mar 26, 2022 at 10:43

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

display array data in angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related