Menu
I am trying to style html and body from the main component:
app.component.styl:
html, body {
padding: 0;
margin: 0;
background: blue;
}
and seems it does not work with my angular component:
app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.styl']
})
export class AppComponent {
}
app.component.html:
<div class="todo-app">
<div>
<input type="text">
<button>Add</button>
</div>
</div>
Why html and body selector don't work, is there a special angular method to achieve that??
629
The app.component is located inside the index.html's body tag; like this
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular Alerts</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="assets/img/favicon/favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<app-root></app-root> <!-- This is your App Component -->
</body>
</html>
Given that, you can't target body or html with the default behavior (that means if ViewEncapsulation is enabled), since styles are scoped to that component only, and the component itself DOES NOT have a body tag; you need to define the styles in the styles.css global file, or turn ViewEncapsulation off for that component so the styles defined in its css file apply globally
140
If you need that the style is apply to all project, you need to deactivate Encapsulation in css,
@Component({
...
encapsulation: ViewEncapsulation.None
...
})
Here a nice article about that. But I recommend you set the style in style.css or style.scss in the root of your project.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
