Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:15Length:2.7 hours

Next lesson playing in 5 seconds


Free Preview: Building App UIs With Angular Material


  • Overview
  • Transcript

Google's Material Design system creates good-looking apps with a UI that is easy for users to understand. However, implementing Material Design is not a trivial task. That's where the Angular Material library comes in—Angular Material makes it easy to create a great UI for your Angular app.

In this course, you'll learn all about how to use Angular and Angular Material to build rich and interactive UIs for our web apps. You'll learn how to set up the library in a new project and how to use each of the main interface components and layout components. You'll also learn how to create forms and use overlay components such as dialogs and tooltips.

Learn JavaScript: The Complete Guide

We've built complete guides to help you learn JavaScript and learn Angular, whether you're just getting started as a web developer or you want to explore more advanced topics.

1. Introduction

1.1 Introduction

Hi folks. Angular Material is the official UI component framework for Angular. And all of the components services and utilities provided by the framework are built using Angular and typescript in the Angular way. This makes developing with them in Angular apps natural and easy. It has a huge community, excellent documentation, and it follows Google's popular material design specification so everything looks modern and crisp. My name is Dan Wellman and, in this course we're going to take a look at selection of the most commonly used components to see how we can integrate with them to create attractive and engaging UIs for our web applications. We'll see how to easily add Angular material to an application using the Angular CLI. And how we can use schematics to quickly create some pre-configured components. Also, using the CLI to scaffold everything out for us.. We'll then move on to see how we can work with some of the components directly looking at layout components, form components, and associated widgets like dialogues and snack bars. Let's make a start in the next lesson by getting everything installed and set up, ready to start the coding examples. Thanks for watching.

1.2 Setup

Hi, folks. In this lesson, we're going to get everything set up and ready to build the example project. We'll be starting from scratch and building everything manually as we go through the course. There is a repository up on GitHub which contains the complete source code, as it will be at the end of the course. This is provided for reference purposes only. I'd strongly encourage you to follow along with me as we go through the course. So first of all then we're going to need NodeJS installed. We're going to be using the Angular CLI in this course and this requires to be NodeJS version 6.9 or above and NPM version 3 or above. If you meet these requirements already, great, you probably don't need to do anything. If you don't meet the requirements or you're not sure, head on over to the nodejs.org site and follow the installation instructions for your platform. To check which versions you have, you can run these commands in the command line. Once we're sure we have the relevant versions installed we can also install the Angular CLI. This will instill the Angular CLI globally which is recommended because it means that we can then run the ng command from anywhere on our system. We can verify that it's been installed correctly using this command. So this should be all the setup that we need to do. During the course then we're going to build a small UI for an example web application using Angular and Angular Material. We can use the Angular CLI to scaffold out a new project for us and we can also use it to add Angular Material. Let's create the new project first. We use the new command and specify the name of our project. In this case, it's example-material-app. And we can use the style option to set SCSS as the default style for the project. The new command takes a little while to run, as it's got a bunch of stuff to do. It's got things to download, it needs to initialize Git, and a bunch of other stuff like that. So it normally takes a minute or two. Once it's done, we can then CD into the new project folder that the CLI created for us. If you've used these CLI before, you know how much it does for you. We should at this point have a fully working application with example tests, development and production web pack configurations, and even a built-in development server that we can use to preview the app as we go. To see the basic app so far then, let's run this command. We should see some activity in the console, and once it says it's complied successfully, we can open up a browser and paste in the dev servers URL. As long as you see the big Angular logo in the middle of the screen, everything should be configured and working correctly. So if you haven't have used this CLI before, I don't wanna go too deeply into it in this course, I do cover it in much more detail in my Angular fundamental course which has whole section dedicated to it. But let's just have a really quick look at what we get by default in our example application. Inside the project folder then we get a .git folder which we can't see in the editor here but which does exist and which contains all of the git files. We get an E to E folder, and this contains the end to end test, which are written using protractor. So there is some configuration here and an example test. We won't be looking at end to end tests in this course. We also get a node modules folder and that contains all of the NPM packages that the CLI has installed for us. There are many, many packages in here. We get some configuration files mostly in the root of the application, all of the regular node files like the package,json. And also some configuration files like the typescript configuration and the tslint configuration. The SRC folder will contain all of the source files for the application. Again, there's some more configuration files here. There's a global styles.scss file and there are entry points for the application and the unit tests, so these are the main.ts and test.ts files. All of the code for the application will reside in the app folder and in here we get the application module and we also get a small application component and that's what we saw running in the browser just a moment ago. We also get an assets folder. By default, this is empty except for a getkeep file, which just makes sure that get tracks the empty folder. And we get an environments folder, and this contains configuration for the production and development environments. So last of all in this lesson then, let's get Angular Material installed as well. We can also use the CLI for this and this is a new feature of the Angular CLI which was added with the recent 6.0 release of Angular. So we can either stop the development server or we can open up a new tab in the console if the commandline that you're using supports tabs. Let's now use the add command to add Angular Material to our projects. We're going to install the 6.2.1 version. I want to install a specific version here just in case Angular Material changes drastically in the future. Material is usually very good at maintaining backwards compatibility just like Angular itself. But let's install the current stable version just in case. We should see some activity in the console, but it shouldn't take as long as the new command that we ran to create the app. Outside of the node_modules folder we won't get any new files in our application, but it will install some tooling for us, which we'll make use of in the next lesson. And it will make some changes to some of the files that already exist in the application. It will add Angular Material as a dependency in our package and package lock JSON files. We also have this angular.json configuration file, and it will add a default material theme style sheet as an inputs in this file. It will also add references to the angular material icons and the Roboto font from the Google APIs CDN. It will update the styles.scss global style sheet. And it will just remove the margin from the body for us. And it will also add a new module to the module for our application. And that's the browser animations module. So it does a number of things for us. And it installs a bunch of tooling in the node_modules folder. And we move on to actually start using Angular Material in the next lesson. So in this lesson, we've got Node JS and NPM installed along with the Angular CLI, which we then used to scaffold out a new web application project, which we then installed Angular Material to. Thanks for watching.