ng add @angular/material
app.module.ts
), import the MatSelectModule
and MatFormFieldModule
from @angular/material
.import { MatSelectModule } from '@angular/material/select';
import { MatFormFieldModule } from '@angular/material/form-field';
@NgModule({
imports: [
// Other imports
MatSelectModule,
MatFormFieldModule
],
// Other module configurations
})
export class AppModule { }
app.component.html
), you can use the mat-select
element with the multiple
attribute to enable multi-select functionality.<mat-form-field>
<mat-label>Select options</mat-label>
<mat-select [multiple]="true">
<mat-option value="option1">Option 1</mat-option>
<mat-option value="option2">Option 2</mat-option>
<mat-option value="option3">Option 3</mat-option>
<!-- Add more options as needed -->
</mat-select>
</mat-form-field>
app.component.ts
), you can access the selected values using the Angular FormControl
or by binding the value
property of the mat-select
element to a variable in your component.FormControl
:import { FormControl } from '@angular/forms';
export class AppComponent {
selectedOptions = new FormControl();
// Access the selected values using the <code>value</code> property of the <code>selectedOptions</code> FormControl
getSelectedOptions(): string[] {
return this.selectedOptions.value;
}
}
getSelectedOptions()
method to retrieve the selected values.