<div class="form-group">
<label class="col-md-4 control-label" for="is_present">Is Present?</label>
<div class="col-md-4">
<select id="is_present" name="is_present" class="form-control" *ngIf="candidates.is_present === true">
<option value="true">Yes</option>
<option value="false">No</option>
</select>
</div>
</div>
I have this code in my html component. I receive a boolean data from API, I would like to know what the best way to use *ngIf to add selected in option tag if the API data is true or false.
Slightly change to Rahul's answer, because from what I understand, you are receiving a boolean value that is should not be the same as candidates.is_present. Therefore store the boolean value to a variable, e.g bool, and then just have the [(ngModel)]="bool" in your select:
<select name="is_present" [(ngModel)]="bool" *ngIf="candidates.is_present">
<option value="true">Yes</option>
<option value="false">No</option>
</select>
Just use candidates.is_present
<select id="is_present" [(ngModel)]="defaultValue" name="is_present" class="form-control">
<option value="true">Yes</option>
<option value="false">No</option>
</select>
and in TS file,
if(candidates.is_present){
this.defaultValue = 'Yes';
}else
{
this.defaultValue = 'No';
}
as i can understand from question you want to select the value in select box based on some candidates.is_present. So here you need to bind the data using [(ngModel)]="candidates.is_present" ,and be sure to include FormsModule in your imports. we use *ngIf when we want our element to remove/add to dom based on some conditions.hope you got the answer
Related
I have following code for my dropdown menu. How can I set a value as selected?
<div class="input-group mb-3">
<label class="input-group-text labelDropDown" for="inputGroupSelect01">Art der
Integration</label>
<select class="form-select" id="inputGroupSelect01" formControlName="integrationType">
<option value="statisch">statisch</option>
<option value="dynamisch">dynamisch</option>
<option value="nein">nein</option>
</select>
</div>
I thought it will be selected if I type in the selected keyword? Why does angular not do this?
I think this work for you:
Use selected in the <option> tag
<div class="input-group mb-3">
<label class="input-group-text labelDropDown" for="inputGroupSelect01">Art der
Integration</label>
<select class="form-select" id="inputGroupSelect01" formControlName="integrationType">
<option value="statisch">statisch</option>
<option value="dynamisch">dynamisch</option>
<option value="nein" selected>nein</option>
</select>
</div>
Selected is an boolean parameter from the HTML Element select
so you have set it to true for the specific option element.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
Alternative Solutions:
use selectedHTMLEl.selectedIndex
sets the selected Option by the Index of Option
The selected value is defined by the formControl you bound it to. Once you give the FormControl integrationType a value, this value will be selected. If you set nein as it's value, the 3rd option neinwill be selected.
Example edit value after init
this.myFormGroup.get('integrationType').setValue('nein');
Example with value on init
this.myFormGroup = this.formBuilder.group({
integrationType: ['nein'],
});
I'm using a html dropdown in my project. How do I get the select value in the Express server?
<div class="mb-3">
<label for="kk" class="form-label">Designation</label>
<select class="form-select" name="picker" aria-label="Default select example" id="kk">
<option selected>Select</option>
<option value="1">Proffesor</option>
<option value="2">Associate Proffessor</option>
<option value="3">Lab Assistant</option>
</select>
</div>
In my post request handling method I have used this code to get the value:
const f = req.body.picker;
What this gives me is the index of the selected values in the dropdown like 0,1,2 etc instead of actual values like professor, associate professor,lab assistant.
You actually get what is in value attribute of the selected option when you send your request. For the data you want, you can do it this way:
<div class="mb-3">
<label for="kk" class="form-label">Designation</label>
<select class="form-select" name="picker" aria-label="Default select example" id="kk">
<option value="" selected>Select</option>
<option value="Proffesor">Proffesor</option>
<option value="Associate Proffessor">Associate Proffessor</option>
<option value="Lab Assistan">Lab Assistant</option>
</select>
</div>
And that is what you will get :
const f = req.body.picker; // -> "" or "Proffesor" or "Associate Proffessor" or "Lab Assistan"
Here I want to get a project from database to edit or change its properties for ex. destination country.
when the project is loaded the select element should be already selected same as the project.DestinationCountry. Then I may change this property if needed.
<select type="text" class="form-control" id="Destination" value="#project.DestinationCountry">
<option value="Canada">Canada</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
</select>
I tried to use value="#project.DestinationCountry" within select element but it did not work.
Here is c# code
private ProjectModel project;
protected override void OnInitialized()
{
project = _db.GetProject<ProjectModel>(id);
}
This won't work since you can't add a value to the select element.
<select type="text" class="form-control" id="Destination" value="#project.DestinationCountry">
<option value="Canada">Canada</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
</select>
However, to make an option selected by default you need to use the selected attribute on option. To make sure the select element shows the fetched value from database, the best bet would be to use conditionals. If project.DestinationCountry matches the value add the selected attribute.
<select type="text" class="form-control" id="Destination">
<option value="Canada" selected>Canada</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
</select>
You can achieve this using conditional attributes
<select type="text" class="form-control" id="Destination">
<option value="Canada" selected="#(project.DestinationCountry == "Canada")">Canada</option>
<option value="Sweden" selected="#(project.DestinationCountry == "Sweden")">Sweden</option>
<option value="Switzerland" selected="#(project.DestinationCountry == "Switzerland")">Switzerland</option>
</select>
This checks whether the condition matches. If true then the value assigned is same as the attribute name thus resulting in selected="selected". When the value is false the attribute won't render at all. Or better use a for loop to output the options and for each entry you can check whether it's the current value and then add selected attribute to it to it.
I did like this and it worked but I want to know if there is smarter solution for that.
<select type="text" class="form-control" id="Destination">
<option value="">Select a country</option>
#foreach (var country in Countries)
{
if (project.DestinationCountry != null)
{
<option value="#country" selected=#(project.DestinationCountry.ToLower() ==
country.ToString().ToLower())>#country</option>
}
else
{
<option value="#country">#country</option>
}
}
</select>
So guys, I have this very simple snippet
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1" (change)="onChooseMenuItem($event.target.value)">
<option selected disabled>Please select a program</option>
<option
style="cursor: pointer"
*ngFor="let menuItem of ngrxMenuItems, let i = index"
value={{i}}
>{{menuItem.type}}
</option>
</select>
</div>
when i make a choice it always shows me the first option as selected. Let's say ngrxMenuItems is an array with [1,2,3,4]. No matter what is the choice you make it will show you only the first option.
What i tried:
- removing (change)="onChooseMenuItem($event.target.value)" and replacing it with (click) event on every row
- trying ngIf options
What I assume it is:
= Some Angular behaviour I am not aware of.
You main problem is here (change)="onChooseMenuItem($event.target.value), the reason being that the target property does not exist on the $event emitted event, you need to handle the value part in the ts method like so
Html
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1" (change)="onChooseMenuItem($event)"> <!-- Change the (change) event emitter -->
<option selected disabled>Please select a program</option>
<option
style="cursor: pointer"
*ngFor="let menuItem of ngrxMenuItems, let i = index"
value={{i}}
>{{menuItem.type}}
</option>
</select>
</div>
Ts
onChooseMenuItem(event: any){
const value = event.target.value;
console.log(value);
}
You do not bind a value from your component to your selection.
So select does not know which values is the actual to select as option.
You must add ngModel to your select:
<select class="form-control" id="exampleFormControlSelect1" [(ngModel)]="select1">
<option selected disabled>Please select a program</option>
<option
style="cursor: pointer"
*ngFor="let menuItem of ngrxMenuItems, let i = index"
value={{i}}
>{{menuItem.type}}
</option>
'select1' is a variable in your component containing the information about the selected option.
<form>
<div class="form-group">
<label for="sel1 primary"></label>
<select class="form-control" id="sel1">
<option *ngFor="let group of instanceList"(click)="change_group(group.name)" > {{group.name}}
</option>
</select>
</div>
</form>
Sorry for bad indentation.
Instancelist list is the array of object contain, id, name, groupnumber.
I want to get the value of selected option in my calling method and want to display it in console.
function change_group(groupname){
this.change_to=groupname;
console.log(change_to);
}
The problem is, the given function not even call upon selecting value in dropdown.
Why not leave the option tags alone and just subscribe to the selection changed event in the <select> tag
<select class="form-control" id="sel1" (change)="onGroupChange($event)">
(click) on <option> is usually not how to do it.
Use instead ngModel
<select class="form-control" id="sel1" ngModel (ngModelChange)="change_group($event)">
<option *ngFor="let group of instanceList" [ngValue]="group"> {{group.name}}
</option>