Angular Material - Widgets

Angular Material provide a rich library of UI widgets allows users to have advanced interaction capability with the application.

Widgets

Following are few important Widgets:

S.N.	Widget & Description
1	Buttons md-button, an Angular Directive, is a button directive having optional ink ripples (and are by default enabled). If href or ng-href attribute is provided, then this directive acts as an anchor element.
2	CheckBoxes md-checkbox, an Angular Directive, is used as a checkbox control.
3	Content md-content, an Angular Directive, is a container element and is used for scrollable content. layout-padding attribute can be added have padded content.
4	DatePicker md-datepicker, an Angular Directive, is an input control to select a date and supports ngMessages for input validation.
5	Dialogs md-dialog, an Angular Directive, is a container element and is used to display a dialog box. Its element md-dialog-content contains the content of the dialog and md-dialog-actions is responsible for dialog actions. mdDialog, an Angular Service, opens a dialog over the application to inform users about the information or require them to make decisions.
6	Divider md-divider, an Angular Directive, is a rule element and is used to display a thin lightweight rule to group and divide contents within lists and page layouts.
7	List The md-list an Angular directive, is a container component to contains md-list-item elements as a children. The md-list-item directive is a container component for row items of md-list container. CSS classes md-2-line and md-3-line can be added to md-list-item to increase the height of row with 22px and 40px respectively.
8	Menu The md-menu an Angular directive, is a component to display addition options within the context of action performed. md-menu have two child elements. First one is trigger element and is used to open the menu. Second element is md-menu-content to represent the content of the menu when menu is opened. md-menu-content usually carries menu items as md-menu-item.
9	Menu Bar The md-menu-bar an Angular directive, is a container component to hold multiple menus. Menu bar helps to create a operating system provided menu effect.
10	Progress Bars The md-progress-circular and md-progress-linear are Angular progress directives, and are used to show loading content message in application.
11	Radio Buttons The md-radio-group and md-radio-button Angular directives are used to show radio buttons in the applcation. md-radio-group is the grouping container for md-radio-button elements.
12	Selects The md-select, an Angular directives is used to show Select box, bounded by ng-model.
13	Fab Toolbars The md-fab-toolbar an Angular directive, is used to show a toolbar of elements or buttons for quick access to common actions.
13	Sliders The md-slider, an Angular directives is used to show a range component. It has two modes: normal - User can slide between wide range of values. Default. discrete - User can slide between selected values. To enable discrete mode use md-discrete and step attributes.
14	Tabs The md-tabs and md-tab Angular directives are used to show tabs in the applcation. md-tabs is the grouping container for md-tab elements.
15	Toolbars The md-toolbar, an Angular directives is used to show a toolbar which is normally an area above content to show title and relevant buttons.
16	Tooltips The Angular Material provides various special methods to show unobtrusive tooltips to the users. Angular Material provides ways to assign directions for them and md-tooltip directive is used to show tooltips. A tooltip activates whenever the user focuses, hovers over, or touches the parent component.
17	Chips md-chips, an Angular Directive, is used as a special component called Chip and can be used to represent small set of information for example, a contact, tags etc. Custom template can be used render the content of a chip. This can be achieved by specifying an md-chip-template element having the custom content as a child of md-chips.
18	Contact Chips md-contact-chips, an Angular Directive, is an input control built on md-chips and uses md-autocomplete element. The contact chip component accepts a query expression which returns a list of possible contacts. The user can select one of these and add it to the list of availble chips.