0 votes
in Angular Material by
Explain Angular Material - Widgets

1 Answer

0 votes
by

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.WidgetsDescription
1ButtonsThe 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.
2CheckboxesThe md-checkbox is used to make any checkboxes and controls.
3Contentmd-content is a container element. It is also used for scrollable content. The layout-padding feature can be added to the padded Material.
4Date PickerThe date picker is an Angular directive, which is used as input control for selecting a date. It also supports messages for input validation.
5DialogsThe 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.
6DividerThe 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.
7ListThe 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.
8MenuThe 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.
9Menu Barmd-menu-bar is a container component that is used for holding many menus. The menu bar provides an operating system provided menu effect.
10Progress Barsmd-progress-circular and md-progress-linear are angular progression instructions that are used to show the application's loading content message.
11Radio ButtonsThe 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.
12SelectsThe md-select is used to show the Select box, bounded by the ng-model.
13Fab Toolbarsmd-fab-toolbar is used to show the toolbar of elements or buttons for quick use of common verbs.
14SlidersThe 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.
15Tabsmd-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.
16Toolbarsmd-toolbar is used to show the toolbar that is the area above the content to show the title and related buttons.
17TooltipsAngular 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.
18ChipsThe 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.
19Contact ChipsThe 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.

Related questions

0 votes
asked May 31, 2022 in Angular Material by Robin
0 votes
asked May 31, 2022 in Angular by Robin
...