Angular material is a UI library. This library is very useful for Angular developers for creating UI fast and interactive in minimal time. In this many types of components, predefined styles are available.

Installation Steps for Angular Material

  1. npm install -g @angular/cli 
  2. npm install @angular/material @angular/cdk @angular/animations –save  
  3. ng add @angular/material  

After that we can use different modules from this library.

Getting Started. You can run an angular project with nodemon also like this.

Some Important features of Angular Material

  1. Responsive design
  2. In-built CSS for UI components
  3. You can create your own styling for its predefined UI Components
  4. Includes effective and latest design of common user interface controls such as buttons, check boxes, and text fields which are adapted to follow Material Design concepts.
  1. browser portability, device independence, and graceful degradation.
  1. There are new features or we can say new and advanced components are available. Some of these features are cards, toolbar, speed dial, side nav, swipe, and so on.
  2. In this developer can configure their own theme with $mdThemingProvider during application configuration.The following properties can be used to assign different color palettes.
  • primaryPalette
  • accentPalette
  • warnPalette
  • backgroundPalette


The Component Dev Kit (CDK) is a set of behavior primitives for building UI components. This gives developers solid, fully tested and highly effective facilities to add common interaction patterns.
When you want to write a generic, reusable component library then you can 

use CDK . It helps you to build  what you need in less time with minimal effort.

There are many Categories of angular CDK. 

Angular Material DatePicker

According to its name it is used for picking up dates.


Some Important Angular Material Built in Directive

  1. md-autocomplete
  2. md-autofocus
  3. md-card
  4. md-chips 
  5. md-dialog 
  6. md-divider 
  7. Md-fab-speed-dial
  8. Md-grid-list
  9. md-ink-ripple
  10. md-nav-bar
  11. Md-progress-circular
  12. Md-slider
  13. Md-swipe-down
  14. Md-switch
  15. Md-tab
  16. Md-toolbar
  17. md-tooltip
  18. Md-truncate
  19. md-virtual-repeat
  20. md-virtual-repeat-container
  21. md-whiteframe

Finally, If you are looking to hire Angular Developers for your Development needs, Extern Labs is here to provide you the best Skilled and Experienced Angularjs Programmers and Developers.

You May Also Like