Styling Links in MEAN Stack
In our previous section, we learned about how we can add routing. We learned a lot of things about routing. In this section, we will improve the visual by making our links stylish. We will make our visual better by using the following steps:
1) In our header component, we will create a new file, i.e., component.css file. We will go to our header.component.ts file and connect it to that CSS file in the following way:
2) In this file, we can style our anchor tag for this component. We will style the anchor tag by using text-decoration and color property in the following way:
Now, if we save it and go back to localhost:4200, we will see a better visual of our links like as:
3) It looks good, but the bullet point is showing in front of the New Post. It should be removed from here, and we will do this by using CSS code for our unordered list in the following way:
Now, we go back to the app, and our angular app looks like:
4) The bullet point is removed, but now the My First App and New Post directly sit next to each other. Firstly, we will go back to the component.html file and make this My First App to Message in the following way:
Now, to make some space in between Message and New Post, we will go back to our html file of the header component and create another element with class. You can give any name to this class, but its name will be “spacer” in our case. This element will be added in the following way:
5) Now, we will go back to our CSS file of this component and style our spacer class. We will use the flex style in the following way:
Now, we go back to the app, and our angular app looks like:
6) It would be nice to have some styling on that last button. We will use not only a normal anchor tag but also adding the mat button directives to this in the following way:
We got a nice hover effect out of the box.
7) This hover effect is pretty neat. We will use the routerLinkActive directive in this anchor tag. This directive will assign a new CSS class to that link whenever it detects that the route this link leads to is the currently active route. The angular material has a couple of helper CSS classes, which we can use like mat-accent. The mat-accent will apply the accent color to the underlying element. We will use it in the following way:
If we are on the page, it will be highlighted, but if we are not, then it is not highlighted like this:
Now, it is working well. In the next section, we will learn about client-side v/s server-side routing and learn how we can edit our posts.
Download Complete Project( Styling Link.zip )