Post
Ask Question

Getting Started With Angular Material

Hi friends, today we are starting an Angular material tutorial. Here, we are learning a step by step tutorial of Angular material. After completing all the steps, we are developing one application in mean technology. Thus, you can continue reading my articles.

Angular material 1.0

When we are talking about Angular material, we think about Angular js. What is Angular material? Don’t worry, we are talking about that and developing a complete mean stack project with the help of Angular material.

Angular material is a UI component framework, which can be implemented in our UI part.  It providesa  set of reusable, well-tested and accessible UI components, based on the material-design.

Here, we mostly study about Angular material 2.0. I kindly refer you to learn about Angular material 1.0. On its official Website, you will easily learn or you can  comment on the post. 

angular material

Angular material 1.0 uses full component overview.

  1. Auto complete: - It is used with md-autocomplete. It uses special input control. It uses <md-autocomplete> tag.

    Auto complete

  2. Button Sheet: - $md button sheet is an Angular service, used for the button. 

    Button Sheet

  3. Material card:-md-card is an Angular directive, used for drawing cards  in Angular js.

    Material card

  4. Widget:-It is a rich library, which supports several types or buttons, check boxes, content, date-pickers, dialog boxes, lists, menu bars, progressbars, redo-buttons, select-options, sliders, toolbars, tasb, tooltips, chips & many more, as necessary.

  5. Layout: - It is a directive of Angular js. It uses rows and columns for the responsive projects.

    Layout

  6. Input:- It is a directive of Angular JS, which is used to define the input button or text area.

    Input

  7. Icons:- It is an Angular directive, used for icons on the projects.

    Icons

  8. Grids:- It is an Angular directive. It uses 12 columns for the desktop, 8 columns for the tablet, and 4 columns for the mobile.

    Grids

  9. Sidenav:- It is a directive, used for the show container component.

    Sidenav

Angular material 2.0
 
It is an advanced version on Angular material 1.0. It is used with Angular JS 2.0 version. It upgrades itself and makes it more attractive. It supports high-quality to develop any project or Website.

demo

  • It uses internationalized and accessible language that all users can easily use.
  • It provides straightforward Apis thatare easily used.
  • It also supports both unit testing & integration testing.
  • Behave as expected across a wide variety of use-cases without bugs.
  • It can easilybe customized within bounds of the material design specifications.
  • Is performance cost is minimized.

Note: Angular material 2.0 is currently supported by only two browsers, Google Chrome & IE11/edge

Angular material 2.0 vs. Angular Material 1.0

Angular material 2.0 is completely new. The Angular material 2.0 component builds on top of Angular js 2.0. We cannot use Angular material components with Angular js 2.0.


Similar Articles