CODEWITHSUNDEEP
javascriptarraysjsonangular
ChristophBTW
ChristophBTW

Reputation: 33

display array data in angular

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'
  }
]

Upvotes: 0

Views: 485

Answers (1)

Eliseo
Eliseo

Reputation: 58039

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

  1. Interpolation, e.g.

    {{variable}}

  2. Binding syntax,e.g.

    <input [value]="variable">

  3. Two way binding,e.g.

    <input [(ngModel)]="variable">

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

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

  5. Others object like Reactive Forms

  6. ...

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-)

Upvotes: 1

Related Questions