Following SCSS style not getting applied in Angular:
app.component.scss
body{
background-color:red;
}
app.component.ts
import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import { ViewEncapsulation } from '@angular/core'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
}
Html:
<body>
<nav>
</nav>
</body>
You can't style the body tag from the app component. If you want to set the background color like you wish you need to do so in your styles.scss else file.
Also assuming want to set the background color to a tag in the app component, the tag has to have contents before you can see the background color or you can just set a height for the said tag and then the color will show
Your app.component.html can't have a body tag because the angular lives in the app-root tag which is created inside the body tag of the index.html page
Actual rendered as
<body>
<app-root>
</app-root>
</body>
But what you are trying is and that is rendered as
<body>
<app-root>
<body>
<nav>
</nav>
</body>
</app-root>
</body>
And scss is applied as
body[app-root]{ background-color:red}
Which won't work.
So if you want to apply the background color you have to set the style in global scss file i.e
Style.scss that is present in the root folder of the application or search style.scss in command palette of the editor