Creating a toolbar using Mean Stack

In this section of the tutorial, we will learn how we can create a toolbar in our application using the MEAN stack and angular material components. We should know that every application has some sort of header.

For this purpose, we will create a new component. We will create a new folder in the app folder and give it the name header.

In this folder, we will create our header.component.ts and header.component.html files as we have created post-create.component.ts and post-create.component.html files.

In the header.component.ts file, we will create class HeaderComponent and export the class header component. We will also add @component decorator by importing it from the @angular/core. We will add the selector and the templateUrl and we code this complete file in the following way:

In the html file, we will use another component from the angular/material component framework. We will unlock MatToolbarModule by importing it and adding it to the imports array into the app.module.ts file.

Now, we will use the material design toolbar in our application. So, we will add the following line of code in our header.component.ts file:

We can also set the color to it. We will set the color to primary because grayish look doesn't seem good.

The header component is not used yet. For using it, we need to unlock it by going to declarations in our app.module.ts file. So, we will add our component in the declaration by importing it in the following way:

Now, we can use our header component. We will add it to our app.component.html file by adding the following line of code:

We will save all the files and run them to the ng serve. After running it to the local host, we will see a toolbar on the browser like that:

The card is placed directly on the edge of the toolbar and to change it, we wrap our main content with the main element in the following way:

Now, we will style that component by writing the CSS code in the app.component.css file in the following way:

We will save it and run it, and the application will look like:

In the next section, we will learn about navigation. We will add navigation in it and make it an attractive application.