Improve your layout with Angular Material, styles, and custom CSS.
- [Narrator] We have our data displaying, but it's raw text at this point. There isn't much of a user interface. Let's start developing a nicer looking UI, using Angular Material. If you are used to working with Bootstrap, you might wonder why it isn't being used instead. I prefer Materials, since it's made by the Angular team to specifically work with the latest version of Angular. It's also fast, and not too verbose. Let's begin by heading over to the Angular Material website.
That's located at material.angular.io. Over the past year, Angular Material has been getting many updates. Some of which have introduced breaking changes. And so I suggest as you follow along with this course, and installing and setting up Angular Material, you head over to the Angular Material website to follow the more updated instructions. So on your end, please go over to the getting started section. I'll begin by installing Angular Material with NPM.
Please follow along, but as mentioned before, if there's any changes in the installation or set up instructions, please make those modifications to the instructions I'll be giving you in this course. So I'll copy over the NPM install command. Back in our editor, let's open up a new terminal, by hitting the plus sign, then I'll paste that in. Now that's it's finished installing with NPM, let's continue with the instructions.
Next we'll need to install their Angular Animations package. So I'll copy that NPM install command, and paste that into our new terminal. And let's carry on. Then let's go ahead and import browser animation's module inside our main app module. I'll copy the following line, and inside our app module.ts, I'll paste that at the top.
And then as we can see, we'll need to add it to our imports list. So I'll add that on line 14, the side browser module. Then let's carry on. And for step three, we will need to import each of the components from Angular Material that we would like to use. So I'll copy this line, then back in our app module, go below line three and paste that in.
And I'll take out the md checkbox module, since we'll only be using the ButtonModule for now. Then let's go ahead and add the MdButtonModule to the imports list. And we can do that on line 15. Let's go down to step four. Next, we'll need to include a theme. So let's copy this line, and go over to our styles.css and paste that in. So back in our editor.
Inside our source folder, we'll see a styles.css. Let's open that, and paste that line in. Step five includes Gesture Support. And we'll need to have that for a couple components, but fortunately we won't be using them for this course, so we can skip past step five. Step six is optional, and that should be it. Let's go ahead and test out Angular Materials.
The first thing we'll do is go to our app, to make sure we're getting no errors after saving our changes. I'll also close the terminal, so that we get more screen space. One important note is that the server, which is hosting our web app, is still running, even though the integrated terminal is not being shown. That means the changes or updates we make in our code will continue to be reflected inside the browser. Next I'll close up the app module, and go back to our messages component.
First, let's look at line five, and convert our string literal into a template literal, so that we can have multi-line strings to format our HTML better. So I'll get rid of the single quote, and put in a backtick, and I'll do the same with the last single quote. Now let's format our HTML on multiple lines. Save that, and make sure it still works. Next, let's test that out by adding the button.
So underline eight. I'll add button, with style md from materials dash button. And I'll call it test, and then I'll close it. Let's save that and give it a try. As you can see, we'll see a test button. If we hover it, we can see we're getting the Material styles. For now, let's get rid of the button on line nine. Next, we'll add some better formatting for our message text and message owner, using an md card.
And just like md buttons, we'll have to add that to our app module. So let's open that up. On line four, beside MdButtonModule, we'll add mdcardmodule. And let's add that to the imports list on line 15. Next, we need to cover a breaking change in Angular Materials. As mentioned earlier, this course has updated Angular and Angular Material. In previous versions of Angular Material, we did not have to specify which component modules we needed to use.
It just imported all of them with one single import. With this version, a breaking change was introduced, where we have to import every module. To make this compatible with the rest of the course, we will import all of the materials modules we will use in the rest of this course, now. Since there are quite a few modules that we'll be using, I've stacked them vertically. Next, let's add them to the imports list.
And I've stacked the imports list vertically as well. And that should be it. And we can wrap line seven with an md-card. And then we'll close it. Let's save this and give it a try. Now we can see that our messages are being shown inside cards. Let's add some nicer formatting by putting the owner inside the card title, and the message text inside the card content.
So we'll format this on a new line. Then we'll take out the message text for now. And we'll add md-card-title. And we'll close it. Then we'll add the md-card-content below it. And I'll paste in the message text we had removed earlier. Let's save that and give it a try.
We can see the formatting looks a lot better, but the contrast is a bit off in the foreground, and the cards somewhat bleeds into the background. So let's add a bit more contrast. Let's go back and open up our styles.css. Then let's add a body style. And we'll add a property background, and we'll set that to hash, followed by six e's. Which will give us a light gray.
Let's save that, close out styles. Then back inside our messages component, we'll add one more custom style. Let's go to our md card on line seven and add a style property. We'll use a margin, and we'll add eight pixels. Let's save that and give it a try. Now we can see there's a lot more contrast in our layout, and we have some spacing in between each message. Now that we're happy with the way our front end looks, let's take a look at developing our back end.
- Setting up the infrastructure
- Displaying data in Angular 2
- Refining your layout with Angular Material
- Getting your data from Node.js
- Saving data to a list
- Creating the component
- Getting your input data
- Creating reactive forms in Angular
- Creating a security middleware
Skill Level Intermediate
Q: This course was updated on 10/17/2017. What changed?
A: We updated five videos to reflect changes to the setup and data retrieval and display processes in Angular 2. For example, instead of using a Git Angular template, the updated course uses the Angular CLI to generate a starting template, for a smooth runtime experience.