Access Angular material’s MatSelect Options Panel Container

What is Angular?

Angular is one type of frontend development framework used for building single-page client applications using HTML and Typescript. Angular is written in Typescript and impeccably supports styling features, RxJS library for reactive programming, etc.

What is Angular Material?

Angular Material Design is an open-source framework. So you don’t need to buy a license in order to use it. Angular Material is one type of collection of a user interface component for Angular JS developers. Angular Material gives some major attempts around creating accessible components. Angular Material has a lot of advantages in the angular UI framework. It has complete material design support and also it has a mobile-first framework that works acceptably with a desktop.

Thus, we can say that UI/UX components of an Angular, are also known as Angular Materials. They help Angular applications perform efficiently. With the help of this, we can develop faster, beautiful, and responsive websites. It is encouraged by Google Material Design.

What is MatSelect Options Panel Container in Angular Material?

is basically one type of form control for selecting a value from a set of options, it is almost similar to the nativeelement. That was designed to work inside of a element.

To add options in for the select, add elements. Each of a has a value property. value property has a value that can be used to set the value which will be selected if the user chooses this option. The content of the is what will be shown to the user.

Angular Material also supports the use of the nativeelement. It will store inside of . The native control has several advantages like accessibility, performance, and usability.

Let’s see with following example:
Open vs code editor terminal
For develop new application run following command:
ng new angular-matselect
Here, we use routing and scss for this application
Now, our new application is ready.

Go to project directory using following command:
Cd angular-matselect
Run application using following command:
Ng serve -o

For use angular material in our application run following command:
ng add @angular/material
Here, we use prebuilt theme indigo, global Angular Material typography styles, and browser animations for Angular Material for this application.
Now we implement a basic demo of mat-select Options Panel Container in this application.

For use of mat-select component we must import following component in app.module.ts file of our application:
import {MatSelectModule} from ‘@angular/material/select’;

app.module.ts

import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { AppRoutingModule } from ‘./app-routing.module’;
import { AppComponent } from ‘./app.component’;
import { BrowserAnimationsModule } from
‘@angular/platform-browser/animations’;
import { MatSelectModule } from ‘@angular/material/select’;
import { FormsModule } from ‘@angular/forms’;
import { MatFormFieldModule } from ‘@angular/material/form-field’;
import { MatInputModule } from ‘@angular/material/input’;

@NgModule({
declarations: [
AppComponent
],

imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
FormsModule,
MatInputModule,
MatFormFieldModule,
MatSelectModule,
],
providers: [],
bootstrap: [AppComponent]
})

export class AppModule { }

app.component.ts

import { Component } from ‘@angular/core’;

interface selects {
value: string;
viewValue: string;
}
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.scss’]
})
export class AppComponent {
title = ‘angular-matselect’;

selects: selects[] = [
{value: ‘value-0’, viewValue: ‘item 1’},
{value: ‘value-1’, viewValue: ‘item 2’},
{value: ‘value-2’, viewValue: ‘item 3’}
];
}

app.component.html

Basic example of mat-select

Select any one value

{{v1.viewValue}}

Basic example of native select

Cars
MercedesAudiVolvoSaabFiat

Output:

[Output]
Getting and setting the select value in Options Panel Container
is one type of form control for selecting a value from a set of options/values, similar to the nativeelement. The supports 2-way data binding to the value property. It has no need for Angular forms. It is work inside of a element.

export class SelectValueBindingExample {

selected = ‘option3’;

}

Select an option

None
Option 1
Option 2
Option 3

You selected: {{selected}}

[Output]
Creating groups of options
The element can be used to group common options under a subheading. Using property of we can set the name of the group. Like individual elements, an entire can be disabled or enabled by setting the disabled property on the group.
export class SelectOptgroupExample {
pokemonControl = new FormControl();
pokemonGroups: PokemonGroup[] = [
{
name: ‘Grass’,
pokemon: [
{value: ‘bulbasaur-0’, viewValue: ‘Bulbasaur’},
{value: ‘oddish-1’, viewValue: ‘Oddish’},
{value: ‘bellsprout-2’, viewValue: ‘Bellsprout’}
]
},
{
name: ‘Water’,
pokemon: [
{value: ‘squirtle-3’, viewValue: ‘Squirtle’},
{value: ‘psyduck-4’, viewValue: ‘Psyduck’},
{value: ‘horsea-5’, viewValue: ‘Horsea’}
]
},
{
name: ‘Fire’,
disabled: true,
pokemon: [
{value: ‘charmander-6’, viewValue: ‘Charmander’},
{value: ‘vulpix-7’, viewValue: ‘Vulpix’},
{value: ‘flareon-8’, viewValue: ‘Flareon’}
]
},
{
name: ‘Psychic’,
pokemon: [
{value: ‘mew-9’, viewValue: ‘Mew’},
{value: ‘mewtwo-10’, viewValue: ‘Mewtwo’},
]
}
];
}

mat-selectPokemon
— None —

{{pokemon.viewValue}}

[Output]

Multiple selection
We can configure to allow multiple selection by setting the multiple property. defaults mode value is single-selection mode. This multiple property will allow the user to select multiple values from a set of options at once. When using the in multiple selection mode, its value will be a sorted list of all selected values rather than a single value.
Using multiple selection with a native select element () is discouraged inside , as the inline listbox appearance is inconsistent with other Material Design components.

export class SelectMultipleExample {

toppings = new FormControl();

toppingList: string[] = [‘Extra cheese’, ‘Onion’, ‘Pepperoni’, ‘Sausage’,’Mushroom’,

‘Tomato’];

}

Toppings

{{topping}}

[Output]

Disabling the ripple effect
If we want to disable ripple animation, we need to set disableRipple property on . By default, when we click on a , a ripple animation is shown.

Select an option

Option 1
Option 2
Option 3

Adding custom styles to the dropdown panel
uses panelClass property using this we can apply additional CSS classes to the dropdown panel. So we can easily style the dropdown panel.

Panel color

Red
Green
yellow

export class SelectPanelClassExample {
panelColor = new FormControl(‘red’);}
.example-panel-red.mat-select-panel {
background: rgba(255, 0, 149, 0.5);
}

.example-panel-green.mat-select-panel {
background: rgba(0, 255, 76, 0.5);
}

.example-panel-yellow.mat-select-panel {
background: rgba(240, 255, 24, 0.945);
}

Conclusion

In this blog, we have learned how to use angular material and how to access material components. We have also seen how select value. has many options and configuration. So, we can easily customize its behavior and styles. I am working as a Digital Marketing Manager in a reputed Outlook Addin Development Company. Being a technical writing enthusiast and a goal-oriented individual with honed communication skills, I have served in the Information technology, Services, and Product industry. Having a high-energy level, I absolutely love what I do and I’m passionate about being better every day.