Javatpoint Logo
Javatpoint Logo

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.

Creating a toolbar

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.

Creating a toolbar

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:


Creating a toolbar

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.


Creating a toolbar

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:


Creating a toolbar

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


Creating a toolbar

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:

Creating a toolbar

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:


Creating a toolbar

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


Creating a toolbar

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

Creating a toolbar

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






Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA