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