||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.
||The md-checkbox is used to make any checkboxes and controls.
||md-content is a container element. It is also used for scrollable content. The layout-padding feature can be added to the padded Material.
||The date picker is an Angular directive, which is used as input control for selecting a date. It also supports messages for input validation.
||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.
||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.
||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.
||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.
||md-menu-bar is a container component that is used for holding many menus. The menu bar provides an operating system provided menu effect.
||md-progress-circular and md-progress-linear are angular progression instructions that are used to show the application's loading content message.
||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.
||The md-select is used to show the Select box, bounded by the ng-model.
||md-fab-toolbar is used to show the toolbar of elements or buttons for quick use of common verbs.
||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.
||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.
||md-toolbar is used to show the toolbar that is the area above the content to show the title and related buttons.
||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.
||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.
||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.