I have to run some code when country is selected in the dropdown but the method is not called at all. Here is the material code:
<mat-form-field>
<mat-label>Select country</mat-label>
<mat-select (change)="countrySelected(value)">
<mat-option>None</mat-option>
<mat-option value="option1">France</mat-option>
<mat-option value="option2">Germany</mat-option>
<mat-option value="option3">America</mat-option>
</mat-select>
</mat-form-field>
Here is the method that is not being called:
countrySelected(value): void {
console.log(value);
}
You should be using the event selectionChange instead. So change your code as follows:
<mat-form-field>
<mat-label>Select country</mat-label>
<mat-select (change)="selectionChange(value)">
<mat-option>None</mat-option>
<mat-option value="option1">France</mat-option>
<mat-option value="option2">Germany</mat-option>
<mat-option value="option3">America</mat-option>
</mat-select>
</mat-form-field>
Checkout https://material.angular.io/components/select/api for all supported events.
Related
I'm using a mat select to display a list of items.
<mat-label>{{ 'CLAIMS.PLACEHOLDERS.STATUS' | translate }}</mat-label>
<mat-select (valueChange)="onStatusChange($event)">
<mat-option *ngFor="let option of statusses" [value]="option">
{{ 'STATUS.' + option | translate }}
</mat-option>
</mat-select>
When selecting certain options my dropdown is "stuck" in my navbar:
Is there any way to change the "direction" of the dropdown? So it does down instead of up?
I was able to force my dropdown to open downwards by adding the disableOptionCentering option.
<mat-label>{{ 'CLAIMS.PLACEHOLDERS.CLAIMTYPE' | translate }}</mat-label>
<mat-select (valueChange)="onClaimTypeChange($event)" disableOptionCentering>
<mat-option *ngFor="let option of claimTypes" [value]="option">
{{ option }}
</mat-option>
</mat-select>
<mat-select >
<mat-option *ngFor="let i of List" [value]="i.value">
{{i.viewValue}}<span *ngIf="panelOpen">{{i.viewValue2}}</span>
</mat-option>
</mat-select>
I would like to show additional values in mat option row and hide that additional value after selection. Is There any possibility using panelOpen, Thanks in advance.
If you declare the mat-select as a variable using the # notation, you can then change your ngIf to mySelect.panelOpen where mySelect is the ID you gave the mat-select:
<mat-select #mySelect>
<mat-option *ngFor="let i of List" [value]="i.value">
{{i.viewValue}}
<span *ngIf="mySelect.panelOpen">{{i.viewValue2}}</span>
</mat-option>
</mat-select>
Here's a StackBlitz.
How can I hide the values in the drop down box. What I want to achieve is just a placeholder without showing the values selected from multiple. I should keep this ngmodel and selectionChange for other purposes.
Is there any way?
<mat-form-field>
<mat-select
placeholder="Select Columns"
(selectionChange)="columnSelect()"
multiple
[(ngModel)]="selectedColumns"
>
<mat-option
*ngFor="let c of fixedColumns"
[value]="c"
>
{{ c }}
</mat-option>
</mat-select>
</mat-form-field>
I solved the problem by adding mat-select-trigger;
<mat-select
(selectionChange)="columnSelect()"
multiple
[(ngModel)]="selectedColumns"
>
<mat-select-trigger class="trigger">
Select Columns
</mat-select-trigger>
<mat-option
*ngFor="let c of fixedColumns"
[value]="c"
>
{{ c }}
</mat-option>
</mat-select>
``
I have a mat-form-field that contains a chip list and another one that contains any other kind of input. I want to be able to navigate away from the chip list into the input field and into the following mat-form-fields but it seems like this behaviour is not supported. Does anyone have a work around for this to be able to navigate this components with tab?
<mat-form-field class="example-chip-list">
<mat-chip-list #chipList>
<mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
[removable]="removable" (removed)="remove(fruit)">
{{fruit.name}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input placeholder="New fruit..."
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="add($event)">
</mat-chip-list>
</mat-form-field>
<mat-form-field>
<input placeholder="Another unrelated field" matInput>
</mat-form-field>
example: https://stackblitz.com/edit/angular-ixswwc?file=app/chips-input-example.html
The infinite loop of focus happens because the <input> is inside of the <mat-chip-list>
It could be solved by doing the following
<mat-form-field class="example-chip-list">
<mat-chip-list #chipList>
<mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
[removable]="removable" (removed)="remove(fruit)">
{{fruit.name}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
</mat-chip-list>
<input placeholder="New fruit..."
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="add($event)">
</mat-form-field>
<mat-form-field>
<input placeholder="Another unrelated field" matInput>
</mat-form-field>
In below code, my country select options are fired so many times that browser stopped responding.
<div [formGroup]="countryForm">
<mat-form-field>
<mat-select formControlName="selectedCountry" class="my-item-text" placeholder="Country">
<mat-option (onSelectionChange)="onCountrySelectionChanged($event)" *ngFor="let myCountry of countries" [value]="myCountry.short" class="my-item-text">{{ myCountry.name }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
and my component code as below
onCountrySelectionChanged(changeEvent) {
if (changeEvent && changeEvent.isUserInput && this.selectedCountry != changeEvent.source.value) {
this.countrySelected.emit( changeEvent.source.value);
}
}
I tried to restrict by checking if its user change event [isUserInput] and also checking if the value really changed! Now am able to reduce the fire-events and the application works normal.
Is there a better way to use select-option as am now including above logic everywhere am using mat-select component.
The mat-select has an Output property you can bind to called selectionChange, which should fire whenever the option is changed by the user. Try switching up your code to this:
<div [formGroup]="countryForm">
<mat-form-field>
<mat-select (selectionChange)="onCountrySelectionChanged($event)" formControlName="selectedCountry" class="my-item-text" placeholder="Country">
<mat-option *ngFor="let myCountry of countries" [value]="myCountry.short" class="my-item-text">{{ myCountry.name }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
Thinking about it - what's probably happened is that you've put your onSelectionChange binding on every single mat-option, so when you change the option, you're likely firing that once for each option in your select. Moving it out to the mat-select means it will only fire once.