Angular Material - Angular Material Widgets - Angular Material Tutorial

The 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.

The md-checkbox, an Angular Directive, is used as a checkbox control.

The md-content, an Angular Directive, is a container element and is used for scrollable content. The layout-padding attribute can be added to have padded content.

The md-datepicker, an Angular Directive, is an input control to select a date. It also supports ngMessages for input validation.

The 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 the md-dialog-actions is responsible for dialog actions.

The mdDialog, an Angular Service, opens a dialog over the application to keep the users informed and help them make decisions.

The 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.

The md-list, an Angular directive, is a container component that 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.

The md-menu, an Angular directive, is a component to display addition options within the context of action performed. The md-menu has two child elements. The first element is the trigger element and is used to open the menu. The second element is the md-menu-content to represent the content of the menu when the menu is opened. The md-menu-content usually carries the menu items as md-menu-item.

The md-menu-bar, is a container component to hold multiple menus. The menu bar helps to create an operating system provided menu effect.

The md-progress-circular and md-progress-linear are Angular progress directives, and are used to show the loading content message in application.

The md-radio-group and md-radio-button Angular directives are used to show radio buttons in the applcation. The md-radio-group is the grouping container for md-radio-button elements.

The md-select, an Angular directives is used to show Select box, bounded by ng-model.

The md-fab-toolbar, an Angular directive, is used to show a toolbar of elements or buttons for quick access to common actions.

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.

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.

The md-toolbar, an Angular directives is used to show a toolbar which is normally an area above content to show the title and the relevant buttons.

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.

The md-chips, an Angular Directive, is used as a special component called the Chip and can be used to represent small set of information for example, a contact, tags etc. Custom template can be used to 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.

The md-contact-chips, an Angular Directive, is an input control built on md-chips and uses the md-autocomplete element. The contact chip component accepts a query expression which returns a list of possible contacts. A user can select one of these and add it to the list of availble chips.