Javatpoint Logo
Javatpoint Logo

Angular Material - Widgets

Angular Material provides a library of UI widgets. With the help of this library users to have advanced interaction capability with the application.

The following table lists down a few essential Widgets with their description:

S.N. Widgets Description
1 Buttons The md-button is a button instruction that contains optional ink waves. If href or ng-href attribute is there then the directive acts as an anchor element.
2 Checkboxes The md-checkbox is used to make any checkboxes and controls.
3 Content md-content is a container element. It is also used for scrollable content. The layout-padding feature can be added to the padded Material.
4 Date Picker The date picker is an Angular directive, which is used as input control for selecting a date. It also supports messages for input validation.
5 Dialogs The md-dialog is a container element mainly used to display dialog boxes. md-dialog-actions are responsible for dialog actions.
It opens a discussion on the application to keep users informed and decide.
6 Divider The md-divider is a rule element which displays a thin, lightweight rule to divide the content into groups and also in lists and page layouts.
7 List The md-list is a container component containing the md-list-item elements as children. The CSS classes md-2-line and md-3-line is added to the md-list-item to increase row height with 22px and 40px, respectively.
8 Menu The angular directive md-menu is a component to display additional options in the context of the task performed. The md-menu has two child elements.
  • The first one is the trigger element that is mainly used to open the menu.
  • The second one is md-menu-content that is used to represent the menu's contents when menu is open. Md-menu-content carries menu items as md-menu-items.
9 Menu Bar md-menu-bar is a container component that is used for holding many menus. The menu bar provides an operating system provided menu effect.
10 Progress Bars md-progress-circular and md-progress-linear are angular progression instructions that are used to show the application's loading content message.
11 Radio Buttons The md-radio-group and md-radio-button angular directives is used to show radio buttons. md-radio-group is the container for md-radio-button elements.
12 Selects The md-select is used to show the Select box, bounded by the ng-model.
13 Fab Toolbars md-fab-toolbar is used to show the toolbar of elements or buttons for quick use of common verbs.
14 Sliders The directive md-slider is used to show the boundary component. There are two ways to do this:
  • General: Users can slide between expanded values omission.
  • Discrete: The user can slide between the selected values. Use md-discrete to enable discrete modes.
15 Tabs md-tabs is a type of angular directives that is used to show tabs in angular. md-tabs is a grouping container for md-tab elements.
16 Toolbars md-toolbar is used to show the toolbar that is the area above the content to show the title and related buttons.
17 Tooltips Angular content provides many particular ways to show users unobtrusive tooltips. The angular range offers instructions for them, and the md-tooltip directive is used to display tooltips. A tooltip is activated and touches the parent component when the user concentrates.
18 Chips The md-chips are an angular directive used as a unique component called a chip. It represents a small set of information.
For example, a contact, tag, etc. Custom templates are used to render the contents of a chip. It can be achieved by specifying the md-chip-template element containing the custom content as md-chips.
19 Contact Chips The angular directive md-contact-chips are the input control that is built on md-chips and uses the md-autocomplete element. The contact chip component accepts a query expression that lists the contacts.

In the coming section, we will discuss each widget in detail.

Youtube For Videos Join Our Youtube Channel: Join Now


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Trending Technologies

B.Tech / MCA