Here, the simple and easy way to set default value to select in Angular 5 which is iterated with an array of objects.
Let’s consider the below sample object which is going to iterate in the select options
[
{
"userName": "User1",
"userId": "1",
"userRole": "admin"
},
{
"userName": "User2",
"userId": "2",
"userRole": "moderator"
},
{
"userName": "User3",
"userId": "3",
"userRole": "user"
}
]In above array, I need to iterate and get the complete object on selection. So I assign the complete object to the [ngValue] to the iterative option tag.
While changing the option you will get the proper object’s value, but in case of retrieving & reassign the data or initialize some value to the select dropdown as default, we cant able to straightaway do that by assigning the appropriate object to the select’s ngModel.
Solution to set default value to select in Angular 5.
HTML :
For that, we can use [compareWith]. Refer the below HTML code snippet having the [compareWith ] directive.
<select [compareWith]="compareByuserId" [(ngModel)]="selectedUser" name="user" (change)="setUserData(selectedUser)">
<option disabled value="undefined" > Select User</option>
<ng-container *ngIf="users" >
<option *ngFor=" let user of users" [ngValue]="attribute" >{{user.userName}} </option >
</ng-container >
</select >
TypeScript:
Add the below-given code snippet to your respective TS file. Here userId is the key which used to compare the available and assigned object. You can change the key on demand.
compareByuserId(arg1, arg2) {
if (arg1 && arg2) {
return arg1.userId== arg2.userId;
} else {
return false;
}
}
Retrieve & Assign Value:
Now you can directly assign the required object to the ngModel selectedUser.
This will make the select box to have the assigned value as the preselected as default.
Assign the undefined to selectedUser have the select box to have the “Select User” as a default selection.
Tune In for more Angular updates.
