Using Angular material - Angular Tutorial

- [Instructor] It's time to start designing our user interface. And for that, we are not going to start from scratch. We're not going to write our own CSS. We are going to use Angular Material. Angular Material has its own website at material.angular.io. And here when we get into Get started, we will see the steps to install and use this framework. It's a dependency on Angular, but we are not going to use npm install. We are going to use an Angular CLI schematic. For that we use ng, space, add, space, and the name of the package. So in this case it's at @angular/material. So let's go back to our project, open the terminal, and type ng add @angular/material. After verifying on the server the last available version, it will start asking a couple of questions. The first one and the simpler one is, do you want to install this? And say yes. Now it will download all the dependencies, and then it's going to ask me for a couple of questions. For example, first, what's the prebuilt theme that we want to use? The theme is a set of styles that defines, for example, the color palette and other design information that will be applied automatically to all your UI components. Using your arrow keys, you can select one and of course you can change that later. And if you want to preview how they look like, you can use Control-click or Command-click if you're on the Mac, to actually go and see this in action. So you can open this in a website. This is Indigo/Pink, how our app will look like. And this is for example, Purple/Green, and of course you can create your own custom theme. For now, we can just pick anyone, such as Indigo/Pink. The next question is that if you want to set up global Angular Material Typography styles. By default, if you press Return or Enter, it will go with a no. If you say yes, what will happen is that Angular Material will enhance your HTML. So if you have an h1 for example, that is not actually an Angular Material component, it's just HTML. It will also enhance that HTML with typography styles. So we can say yes. And then it's asking us if we want the Angular animations module. And I think we want to include an enabled animations that will create a couple of automatic animations. For example, when you click on one button, it will have a nice glow effect over that button. So we are going to include and enable animations, and now we are ready to use Angular Material. To see this in action, we're going to start by changing our default app component HTML. By default, this HMTL is coming from the Angular template. And actually we want to replace it completely. To see this in action, remember, we need to go to our other terminal that has currently the server running that we can start with Control-C, and we can start again with ng serve. In this case, it's going to be by default the development version, but for now it's pretty good. So now we can open localhost for the 200, and this is what we need to change. We don't want to see this default template, so let's clean the component. All that template's actually available in app.component.html. So we can just go and select all the content that we have here and just remove it. For example, if I save here on h1 saying, "Hello Angular," and if I save the file, now I can see Hello Angular in my Chrome. This is because by default we have a live reload server with ng serve, and it might be a good idea to put the browser and the ID side by side so you can start making changes in your code, saving the file, and then you can see that in action immediately. You don't need to swap between windows. Now instead of this h1, what I want is to have a Material application. The Material application starts with a toolbar. What's a toolbar? A toolbar is just a bar that appears at the top of your app that typically has a title and it can contain icons and other information. The tag that we have to use is mat-toolbar, mat is the prefix for material, so every component in Material UI will have a mat prefix. Within this toolbar, for example, we can put our h1, and instead of Hello Angular, it can say the name of our app that is actually CoffeeLog. Now when we save this, we see an error saying that mat-toolbar is not a known element. And here we have a couple of suggestions of what might be the problem. Well, the problem is that in the app.module.ts, Material Design has one module per component. So the toolbar has its own module. So we need to import that module first. So I'm going to select the import statement from the other competition list, and as the module name I'm going to use @angular/material/, the name of my component, that in this case is toolbar. Then I'm going to hit the Tab key so it goes now from the name of the file or the module directly to the name of the object that we want to import. And we are going to import MathToolbarModule. Be careful here and pick the one that has the module suffix MatToolbarModule. Finally, we need to define that MatToolbarModule within our import declaration. This import has to do with the Angular ng module. So this is an Angular import, and this is a TypeScript import. So I'm going to use a comma here, and then I will use MatToolbarModule. So now every component in my module can actually use the toolbar. So that's why when I save, I see the toolbar in action. It's gray by default, that has to do with my theme. But also the toolbar has a property where I can actually change the color that I want to use, and I can use, for example, primary or secondary that are going to be taken by the theme declaration. Remember that you can create your own theme and change the color of the current theme, but I think that primary looks pretty good. So now we are ready to start creating the page components.