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
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>
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)
I'm finding away to add mat select on my input field but some reason when I click on the arrow, it's not working and not showing me all the list.
I have autocomplete and usually when a user start typing it show all the list to select but I'm trying add mat-select also so that user can just click on the arrow and select from the list without having to type something first.
I've followed below stackblitz example ( checkbox is not needed for mine) but mine is little bit different and I also have text input and auto complete so I'm not sure why I can't type anymore in my input with current code and also the drop down list are not showing when I click the arrow.
any suggestion or help will be really apprecaited.
https://stackblitz.com/edit/angular-material-v9-mat-select-with-mat-chip-list?file=src%2Fapp%2Fselect-multiple-example.html
<mat-form-field class="form" appearance="fill">
<mat-label>Search or Select a Super Tag</mat-label>
<mat-select [formControl]="superTags" multiple>
<mat-select-trigger>
<mat-chip-list #chipList>
<div>
<mat-chip *ngFor="let superTag of superTags" [selectable]="selectable" [removable]="removable"
(removed)="remove(superTag)">
<img class="super-icon" src="/assets/images/icons/super-tag-icon.svg">
{{superTag.tag}}
<mat-icon matChipRemove *ngIf="removable" matTooltip="Remove a super tag">cancel</mat-icon>
</mat-chip>
</div>
<div>
<input matInput #input [(ngModel)]="tagIn" [formControl]="tagCtrl" [matAutocomplete]="auto" [matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes" (matChipInputTokenEnd)="addTag()">
</div>
</mat-chip-list>
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
<mat-option *ngIf="isLoading" class="is-Loading">
<mat-spinner diameter="20"></mat-spinner>
</mat-option>
<ng-container *ngIf="!isLoading">
<mat-option *ngFor="let tag of filteredSuperTags | async" [value]="tag">
{{tag}}
</mat-option>
</ng-container>
</mat-autocomplete>
</mat-select-trigger>
</mat-select>
</mat-form-field>
In this case I would not use the combination of chip list and autocomplete.
I think, what you really need, is the autocomplete with options which contain checkboxes for the multiselect. Try to do, somethihg like this.
<mat-form-field class="example-full-width">
<input type="text" placeholder="Select Users" aria-label="Select Users" matInput [matAutocomplete]="auto" [formControl]="userControl">
<mat-hint>Enter text to find users by name</mat-hint>
</mat-form-field>
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let user of filteredUsers | async" [value]="selectedUsers">
<div (click)="optionClicked($event, user)">
<mat-checkbox [checked]="user.selected" (change)="toggleSelection(user)" (click)="$event.stopPropagation()">
{{ user.firstname }} {{ user.lastname }}
</mat-checkbox>
</div>
</mat-option>
</mat-autocomplete>
Full example:
https://stackblitz.com/edit/angular-sx79hu?embed=1&file=app/multiselect-autocomplete-example.html
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.