MEAN Cookbook

How to do it...

Let's follow the steps to create a simple component style for our PostsComponent:

1. First, we will add a <div> element around our router-outlet, our /src/app/app.component.html template:

<div>  <router-outlet></router-outlet></div>

2. This will wrap our router-outlet so that all subcomponents will be presented within this element. Next, we will add a simple style to /src/app/app.component.scss that will add a bit of padding to the top of our element:

div {  padding-top: 20px;}

3. In our /src/app/posts/posts.component.scss, we will style the div elements within it in a totally different way. We will add a silver background color with a gray border to all the div elements in our posts component template:

div {  background-color