I have one option in my select to filter all my results and list of other options, I can set default option from my list, but cannot set the first mat-option as default. How can I do that?
<mat-form-field class="col-md-12 p-0 pb-2">
<mat-select formControlName="carControl">
<mat-option value="0">(All)</mat-option>
<mat-option *ngFor="let item of data.filteredListOfCars" [value]="item" ngDefaultControl>
{{this.codeListService.getNameOfManufacturerById(item.manufacturerId)}} {{item.model}} {{item.ecv}}
</mat-option>
</mat-select>
</mat-form-field>
I am setting default value like this
selectValueInControl(){
this.filterFormGroup.get('statusControl').setValue(0);
}
use [value]="0" instead of value="0"
<mat-option [value]="0">(All)</mat-option>
Related
I have multiselect list and when I select the option I can't get the value, not from the event, not from the property, everything that I tried -ngModel/value/ formControl is undefined. Why?
<div class="flex" style="width:35%;float:right;margin-top:10px;flex-direction:column">
<form [formGroup]="filterSearchForm">
<mat-form-field style="width:70%">
<mat-select [formControlName]="'customField'" [(ngModel)]="selectedUserType" [multiple]="true" placeholder="בחר" (selectionChange)="filterByCustomFields($event)">
<mat-option *ngFor="let custom of filteredRows" #matSelect (onSelectionChange)="filterByCustomFields($event,matSelect)" [value]="custom.value">
{{custom.fieldHebKey}}
</mat-option>
</mat-select>
</mat-form-field>
</form>
</div>
I've been trying to dynamically check/uncheck the checkbox in mat-option. What's the attribute that would handle this. I've done the same thing in mat-checkbox using [(ngModel)]. Here's my code:
app.component.html
<mat-option [value]="item.name">{{item.name}}</mat-option>
app.component.ts
item = {name:'Option1', checked:true};
it should work but you have a typo, try below code with checked,
<mat-checkbox [(ngModel)]="item.checked">{{ item.name }}</mat-checkbox>
item = {name:'Option1', checked:true};
for mat-select with ngModel,
<mat-form-field appearance="fill">
<mat-label>Select an option</mat-label>
<mat-select [(value)]="selected">
<mat-option>None</mat-option>
<mat-option value="option1">Option 1</mat-option>
<mat-option value="option2">Option 2</mat-option>
<mat-option value="option3">Option 3</mat-option>
</mat-select>
</mat-form-field>
in ts file,
selected = 'option2';
You have ngModel on mat-select rather than on mat-option
Need to display the empty (None) option in Material Select element when the item is null.
<mat-label>Status</mat-label>
<mat-select formControlName="statusId">
<mat-option>None</mat-option>
<mat-option *ngFor="let item of statuses" [value]="item.id">
{{ item.name }}
</mat-option>
</mat-select>
</mat-form-field>```
As seen in above snippet I need to display the "None" option selected by default when the page loads.
StackBlitz
So, you can add a empty value to the None option.
<mat-select [formControl]="foodControl" name="food">
<mat-option value="">None</mat-option>
<mat-option *ngFor="let food of foods" [value]="food.value">
{{food.viewValue}}
</mat-option>
</mat-select>
And, in the ts, you can initialize the control with empty value like this
foodControl = new FormControl('');
same thing can be done with ngModel as well. (included in the StackBlitz)
HTML:
<mat-icon class="fab fa-raspberry-pi"></mat-icon>
<mat-form-field>
<mat-select placeholder="Rpi">
<mat-option>Choose</mat-option>
<mat-option *ngFor='let pi of myRpis' [(ngModel)]="RpiIp" ngDefaultControl [value]="pi.RPI_IP"
(click)="getPins()">
{{pi.LABEL}}
</mat-option>
</mat-select>
</mat-form-field>
Typescript:
I have:
RpiIp = '';
and
getPins() {
console.log(this.RpiIp);
this.doneFetching = true;
}
The console prints an empty value (the value do not change). Where is the error? why the value is not changing?
You need to place the ngModel on the mat-select, not on the mat-option
mat-select will be containing the mat-option, so you have to use ngModel on mat-select.
Consider the below code:
<select . . . name="duration" [(ngModel)]="exercisePlan.duration">
<option *ngFor="let duration of durations" [value]="duration.value">{{duration.title}}</option>
<mat-form-field>
<mat-select placeholder="Rpi" [(value)]="RpiIp">
<mat-option>Choose</mat-option>
<mat-option *ngFor='let pi of myRpis' ngDefaultControl [value]="pi.RPI_IP"
(click)="getPins()">
{{pi.LABEL}}
</mat-option>
</mat-select>
</mat-form-field>
https://stackblitz.com/angular/dybkbybngme?file=app%2Fselect-value-binding-example.ts
Based on this answer the correct answer looks like this:
<mat-icon class="fab fa-raspberry-pi"></mat-icon>
<mat-form-field>
<mat-select placeholder="Rpi" [(value)]="RpiIp">
<mat-option>Choose</mat-option>
<mat-option *ngFor='let pi of myRpis' ngDefaultControl [value]="pi.RPI_IP" (click)="getPins()">
{{pi.LABEL}}
</mat-option>
</mat-select>
</mat-form-field>
Thanks :D
<mat-icon class="fab fa-raspberry-pi"></mat-icon>
<mat-form-field>
<mat-select placeholder="Rpi" >
<mat-option>Choose</mat-option>
<mat-option *ngFor='let pi of myRpis' ngDefaultControl [value]="pi.RPI_IP" (click)="getPins()">
{{pi.LABEL}}
</mat-option>
</mat-select>
</mat-form-field>
I have a bunch of mat-selects like this:
<mat-form-field>
<mat-label>KPI</mat-label>
<mat-select>
<mat-option *ngFor="let kpi of KpiList" [value]="kpi">{{ kpi.name }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-label>Modifier</mat-label>
<mat-select>
<mat-option *ngFor="let modifier of ModifierList" [value]="modifier">{{ modifier }}</mat-option>
</mat-select>
</mat-form-field>
Now, I want to send the selected values with a (click) event of a button:
<button mat-button (click)="addComponent(data)">Add Component</button>
How do I get both values of the dropdowns to the event handler function? Thanks!
you can simply add ngModel to the Select dropdowns.
<mat-form-field>
<mat-label>KPI</mat-label>
<mat-select [(ngModel)]="kpiValue">
<mat-option *ngFor="let kpi of KpiList" [value]="kpi">{{ kpi.name }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-label>Modifier</mat-label>
<mat-select [(ngModel)]="modifierValue">
<mat-option *ngFor="let modifier of ModifierList" [value]="modifier">{{ modifier }}</mat-option>
</mat-select>
</mat-form-field>
In your button function change to something like below
<button mat-button (click)="addComponent(kpiValue,modifierValue)">Add Component</button>
Try binding values of both drop-down to one object and then pass the same object to the event.