CODEWITHSUNDEEP
angulartypescriptsass
Guilherme Luiz Stolfo
Guilherme Luiz Stolfo

Reputation: 75

SCSS style not getting applied in Angular

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>

Upvotes: 1

Views: 1981

Answers (2)

Hitech Hitesh
Hitech Hitesh

Reputation: 1635

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

Upvotes: 1

Michael Ashefor
Michael Ashefor

Reputation: 134

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

Upvotes: 2

Related Questions