Angular Material - Angular Material Widgets - Angular Material Tutorial



What is Widgets in Angular Material?

  • Angular Material provide a rich library of UI widgets allows users to have advanced interaction capability with the application.
learn angular material tutorials - widgets

learn angular material tutorials - widgets Example

Related Tags - angular material , angular 2 material , angular material 2 , angular material design , material angular

Widgets and its descriptions:

  • The following are few important Widgets along with its descriptions:
Sr.No Widget & Description
1 Buttons

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.

2 CheckBoxes

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

3 Content

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.

4 DatePicker

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

5 Dialogs

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.

6 Divider

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.

7 List

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.

8 Menu

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.

9 Menu Bar

The md-menu-bar, is a container component to hold multiple menus. The menu bar helps to create an 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 the 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. The 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.

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

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

16 Toolbars

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.

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

18 Chips

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.

19 Contact 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.


This tutorial provides most of the basics of all the below related informations such as angular material design , material design angular , angular material table , angularjs material , material angular , angular material icons , angular 2 material design , angular material template , angular materialize , angular material theme , angular material layout , material design angular 2 , angular material demo , angular material dialog , angular material form , angular material button , material angular 2 , angular material datepicker , angular material data table , angular material tutorial , angular material login form , material for angular 2 , angular material data grid , material ui angular , angular material calendar , angular material design table , angular material grid , google angular material , angular material components , angular 2 material ui , angular material autocomplete example , material ui angular 2 , angular material 2 demo , angular2 material demo , angular material template free , angular material design tutorial , angularjs material tutorial , material design for angular 2 , angular material tabs example , angular material ui , table angular material , angular material angular 2 , angular material layout align , what is angular material , angular material tabs , angular2 material example , angular 2 material tutorial , angular material login page , angular 2 material demo , angular material cdn , angular material design example , angularjs material design template , material angularjs , angular material grid list , angular material search bar , angular material vs bootstrap , angular material js , angular material range slider , angular material sidenav example , angular material form example , material angular icons , angular material datepicker example , angular material design icons , angular material design template , angular material bootstrap , materialize angular , angular material template free download , bootstrap material design angular , angular material table example

Related Searches to Angular Material Widgets