Improve your layout with Angular material, styles, and custom CSS.
- [Instructor] We have our data displaying, but it's just raw text at this point. There isn't much visual structure or UI. Let's start developing a nicer-looking UI as one we'd expect of a web app, using Angular Material. Material is made by the Angular team and at the time of this course recording, it is in beta. If you are used to working with Angular One, you might wonder why Bootstrap isn't being used instead. I prefer Material since it's made by the Angular team to specifically work with Angular 2 Plus. It's also fast and not too verbose.
Let's begin by installing it with NPM. We'll go over back to Visual Studio Code, and inside the terminal window, let's type in "npm install" dash dash save, at Angular slash Material. Just like we had to add our components to NG modules in order to register it, we need to do the same thing with third-party components. So let's head over to NG Module and add Material to the imports.
In our app.module.ts file, above our custom components on line three, I'll add in import and I'll specify Material Module from at angular/material. And we will also add it to the imports array on line eight. Next we need to reference the style sheet for the theme we will be using.
You can see the different themes at material.angular.io. If you would like to use a different theme, let's open up index.html and add the CSS link. I'll add that below the custom styles.css on line eight. On line nine, let's type in link href node_modules slash @angular slash material slash core slash theming slash prebuilt slash indigo dash pink dot css.
And I'll also specify it's a style sheet. And make sure you close the element. The last thing we need to do, is set up material with system JS. System JS is a module loader that came with the Quickstart Angular template. Let's open up systemjs.config.js. And we will add a new item to the map after the last one. On line 29, let's add at angular material colon npm colon at angular slash material slash bundles slash material dot umd dot js.
Because this is not a final release, this might change. If it is not working all you need to do is trace down the material dot umd dot js file and make sure it's being referenced from the right path. So if we open up node_modules inside at angular under material then we'll head to bundles and you can see our material dot umd dot js core leads to the correct path. Now that the materials library's set up, let's make our layout look better.
First, let's convert the string literal into a template literal so that we can have a multiline string to format our html better. So let's open up our messages component. And on line five, let's switch the single code into a grav accent; this is located to the left of the number one key. And I'll do the same for the ending quote. Then let's break down our html into multiple lines. (clicking) And that reads a lot better.
Then let's get rid of this temporary line we have on line six. And make sure there are no errors in the browser in our Angular app. Next, let's add an MD card element from the materials library around our existing message layout. (typing) And as you can see inside our browser, each message with its owner is inside a different card. Next, let's grab our card owner and cut it out of here.
We'll remove the "by" as well. And we'll break down the card into several lines. Then let's paste the message owner above the message text. And we will wrap the message owner with an MD card title element tag. We can also wrap the message text with an MD card content tag. The MD card content element is intended for the primary content of the card such as the body.
If we save that and look at it inside our Angular app inside the browser, we can see that it's already starting to look a lot better. Let's just do a couple more things. We will add some slight contrast by going over to our syles.css and adding a background color. Back inside Visual Studio, let's open up styles.css. Then at the end of this file, we'll add a body. And we'll specify a background property. And I'll specify a light gray color by using pound sign followed by six e's.
Trying out the changes in our browser, we can see that the cards are more distinct now. Let's do one more thing and add a bit of a margin in between the cards. Let's go to Visual Studio and we'll close our styles.css. Inside our messagecomponent.ts file on line seven let's add in an inline style. We'll set that to margin with a value of eight pixels. Let's give that a try. I'm happy with how that looks. Try to manipulate the margins and backgrounds on your own to get a look that you like.
Next, let's take a look at developing our backend.
- Setting up the app infrastructure
- Creating and configuring the Angular 2 project
- Displaying data in Angular
- Refining the layout
- Creating the ASP.NET Core project
- Creating a controller with ASP.NET Core
- Creating a nav bar
- Registering users
- Authorizing resources