What is the best way to bind drop downs values with numbers from 1 to 100 using a loop using Angular2?
For a limited number of values I am using Ngprime dropdown, but how do I achieve this for 'n' number of values?
Template:
<p-dropdown [options]="tests" [(ngModel)]="selectedCar" [style]="{'width':'150px'}" editable="editable" placeholder="Select a Brand"></p-dropdown>
Component:
this.tests = [];
this.test.push({label: 'Audi', value: 'Audi'});
Can anyone guide me?
A dropdown with options from 1 to 100 in Angular 2 would be something like this:
In component:
export class DropDownClass {
constructor() {
this.numbers = new Array(100).fill(0).map((x,i + 1)=>i); // [1,2,3,4,...,100]
}
}
In template:
<select name="my-dropdown" [(ngModel)]="myDropdownModel">
<option *ngFor="let number of numbers" [value]="number">{{number}}</option>
</select>
new you are not instancing/creating the Array. And therefore the array doesn't exist and the compiler throws error because you try to use fill() on a non existing element. public quantities: Array<number> = [];
getQuantity() {
for (let i = 1; i <= 100; i++) {
this.quantities.push(i)
}
}
<mat-form-field>
<mat-select placeholder="QTY">
<mat-option *ngFor="let quantity of quantities" [value]="quantity">
{{quantity}}
</mat-option>
</mat-select>
</mat-form-field>
Working Code
In template:
<label for="percentage">Percentage</label>
<p-dropdown formControlName="PercentageAbsence" [options]="numbers" [style]="{'width':'200px'}">
</p-dropdown>
In component:
import { SelectItem } from 'primeng/primeng';
export class Test{
numbers: SelectItem[] = [];
constructor(){
Array(100).fill(0).map((x, i) => {
this.numbers.push({ label: `${i + 1}`, value: i + 1 })
});
}
}
In component: (YourComponent.ts)
export class YourComponent {
itemQuantity = []; // instantiates the object to hold array of numbers
public ngOnInit() {
this.itemQuantity = Array(5).fill(0).map((x,i)=>i+1); // fills array with 5 incremental entries starting from 1 (hence the "i+1"). To start at zero remove the "+1"
}
}
In template: (YourComponent.html)
<option *ngFor="let number of itemQuantity" value="{{number}}">{{number}}</option>
The result is a dropdown list with five entries numbered 1 to 5
"value="{{number}}" is optional, in case you want different text and value for each select item, e.g. to get Number 1 you can use Number {{number}}
