Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
Profile photo of Bob at Genuitec
Bob at Genuitec
Virtual evangelist at large. The face of Genuitec often appearing in graphics. Pen-name for our more shy writers of content.

Angular Material is a set of high-quality UI components developed by the Angular team, based on the Google Material design specification. These components help us to build applications with an attractive, yet familiar UI, giving users a consistent experience across devices.

In this Angular tutorial, you will learn how to set up material design in your Angular app. In the course of this tutorial, we will be using Angular IDE. Let’s get started by firing up our Angular IDE and creating a new Angular project named AngularMaterialTutorial.

new-angular-project

name-new-angular-project

 

Install Angular Material and its Dependencies

Once the project is created, we can now install additional node modules to our project. Angular IDE has a terminal view from which we can execute commands, so from the menu select Window, then Show view then click Terminal+. In the opened terminal, type the following commands to install HammerJS, Angular Material and Angular CDK.

We installed HammerJS because some of the Angular Material components depend on HammerJS for gestures. Modern Angular projects already include the Angular animations module (@angular/animations), but if you happen to be following along with an older version of the CLI or Angular, please install that as well.

Using Angular Material Themes

Before we move on to actually using the widgets, let’s get our styles set up.

Material includes a few prebuilt themes that you can find at node_modules/@angular/material/prebuilt-themes. If you open that location, you’ll probably notice the following themes:

  • deeppurple-amber
  • indigo-pink
  • pink-bluegrey
  • purple-green

In our tutorial, we’re going to use the first  – deeppurple-amber, by adding the following line to our global styles file at /src/styles.css

We’re also going to be using font ligatures, for which we need to add the following line to the head section of our /src/index.html file, to bring in the Material icons font.

Using Angular Material Components

In this tutorial, we’re going to use a few material buttons, a snackbar, and a menu. We will begin by importing a number of these modules into the app.module.ts file – for now you can replace the module’s source with the snippet below, but remember, when you’re working with the source, you can use content assist to have the import automatically added for you, as you can see below.

angular-material-components

/src/app/app.module.ts

Replace the source of the app.components.ts file with the source below, this is really the boilerplate component with an additional openSnackBar method that we will use in our template.

/src/app/app.component.ts

Finally, replace the app.component.html file’s contents with the snippet below. Again, remember that in Angular IDE, Angular content assist is available even within HTML templates.

angular-app-component

/src/app/app.component.html

Notes:

  • We’ve used font ligatures, which convert “home” within the md-icon element into a home image instead of displaying the text.
  • The color attribute allows us to set the color of icons, buttons, and other widgets as well, by specifying values like primary, accent, or warn. The actual color used would vary from one theme to another.
  • The md-menu element itself does nothing, this menu must be triggered from another widget, as we have done using a button.
  • Unless the modules corresponding to these widgets are imported, which we did in app.module.ts, you will see errors in your template, autocompletion will not work, and of course, the widgets themselves will be defunct in your app.

Deploying the Application

Allright! It’s time to see our app in action. From the Servers view, expand the Angular CLI node and select AngularMaterialTutorial. From the toolbar, choose Start Server.

angular-material-tutorial-start-server

Use the Run or Debug context menu actions to automatically open the app in Chrome, or manually open  http://127.0.0.1:4200 in your browser to see the app in action.

Our app should finally look like this:

angular-material-tutorial-app


Conclusion

Angular Material is finely tuned for performance, and fully tested across modern browsers and devices. Whether you’re browsing on a desktop, laptop, tablet, or phone – your app looks great and gives users a solid, capable, browsing experience.

We’ve explored only a few of the Angular widgets in this tutorial, but there are dozens more – you should have no problems utilizing these using similar steps.

angular-form-controls

Related Posts

Creating Your First Angular 4 App Using Angular ID... Some time ago an article Creating My First Web App with Angular 2 in Eclipse was published. Since then, Angular was upgraded and became Angular 4, and new tooling for it in Webclipse appeared. Let’s see how creating a simple application using Angular 4 and new Angular tooling looks.PrerequisitesAngular IDE or Webclipse or MyEclipse 2017+—Choose any...
Navigating through an Angular Project You might now be familiar with easy cruising through a Webclipse or an Eclipse project after reading our blog or thanks to a personal experience, but what if you are more of an Angular guy or gal? No worries, breezy navigation is also a reality for Angular projects.This video will give you some useful tips on how to navigate both between files, and...
Enhanced Code Navigation Made Possible with Webcli... There are more reasons to love our Webclipse -- navigating through your Eclipse code is like sailing on a calm, blue sea. Minimap, Breadcrumb Navigation and Project Explorer+ are your unwavering beacons that show you the way to your files and source code, while DevSearch is the compass that will steer you right inside your IDE. How do they work exa...
With Genuitec, updates are free! Did you know that you already have access to the latest Genuitec products, as a licensed user? This includes brand new releases - there's no need to buy a new version when it is released.Perhaps you have gone all the way and purchased MyEclipse, our Java IDE that includes the best tools for dynamic frontend and powerful backend development, and are...

Posted on Sep 1st 2017